セット幅：固定する必要がオブジェクトの他のオブジェクトへの100％の相対

Question

コード：https://jsfiddle.net/gsnfzn35/3/

それは説明するの少しファンキーです、トグル引き出し]ボタンをクリックしてください。右側の引き出しを引き出します。引き出しを引き出すのは1つの容器ですが、2つの重要な要素があります。最初のコンポーネントはすべて上部のコンテンツです。最後のコンポーネントは、底に「固定行」である：

<div class="scroll-fixed-row" style="width:100%;text-align: right"> 
    <p> 
    FIXED FINAL ROW 
    </p> 
</div> 

この行には、その幅が何であれ、引き出す引出しの幅べきです。画面の幅ではありません。現在のところ、width:100%の要素を調べると、幅は引き出しの引き出しではなく画面の幅であることがわかります。これを見るもう1つの方法は、実際にはwidth:100%;text-align:rightがある場合、テキストが画面外になり、幅が広すぎる行の右側に引っ張られます。 width:100%を削除すると、再度テキストが表示されます。

これは、scroll-fixed-rowが固定されているため、引き出しの引き出し自体ではなく、画面から幅をとっているためです。しかし、固定されているのは、引き出しの引き出しの残りの部分がスクロールしても、scroll-fixed-rowは底に留まる必要があるからです。この制約を受けて、どのようにしてメディア検索に基づいてピクセル単位で特定の幅を指定しなくても、すべての画面（完全な応答性）の引き出しの幅になるようにscroll-fixed-rowの幅を設定できますか？

Iが表2 <td width="50%">またはブートストラップグリッドと行の2 <div class="col-xs-6">を使用してのいずれかを使用してscroll-fixed-row 2に「セクション」を分割したいので、私はこれを求めている理由です。現在の実装（Fiddleではなく）では、テーブルの幅が画面から継承されるため、2番目のグリッドのコンテンツがページから押し出されます（同じ問題）。誰かが私にこの質問に答えるのを手伝ってもらえると、私はその部分を理解することができると思う。

Answer 1

100%の代わりにinheritを使用すると幅が解消されます。fixedの要素は、親の幅を.container.scrollにします。あなたがパディングを親に追加したことに気付きました。継承された幅にはパディングが含まれるため、fixed要素がスクロールバーをオーバーレイします。

は

コード：

.scroll-fixed-row { 
    position: fixed; 
    text-align: right; 
    background-color: white; 
    border-top: 1px solid black; 
    width: inherit; /* get width from parent */ 
    bottom: 0; /* stick to bottom */ 
    right: 0; /* fix offset caused by padding */ 
} 

私はあなたのコードでは、あなたが固定赤NAVからそれを相殺するため.scrollにmargin-top: 70pxを使用していることであることに気づいたもう一つ、これは、ビューポートの外にある下部を引き起こし目に見えないもの、特に下のスクロール矢印。私は、次にそれを変更しました：

.scroll { 
    position: fixed; 
    top: 70px; /* offset from top (nav height) */ 
    height: calc(100% - 70px); /* calculate height minus the top offset */ 
} 

あなたはスクロールバーをオーバーラップから固定要素を防ぐために望んでいた場合、あなたはpointer-events: noneを適用し、コンテンツなどの15px間隔を取得し、HTMLで別のラッパーを追加することができ、ためにより良い一貫性：

.scroll-fixed-row { 
    ... 
    pointer-events:none; /* disables mouse functionality to enable scrollbar control */ 
} 

.scroll-fixed-row .inner { 
    border-top:2px solid red; 
    background:lightblue; 
    margin:0 30px 0 15px; 
    pointer-events:auto; /* allows mouse functionality */ 
} 

jsFiddleデモ - スクロールバーの重複：https://jsfiddle.net/azizn/guufj4a0/

jsFiddleデモ - 追加のラッパー：https://jsfiddle.net/azizn/d6wwk51b/