html - バウンディングボックス内のCSSで固定された位置?

Question

こんな感じでコメント欄が…

<div id="comments">
   ...
</div>

さて、このコメント div 内に、box という別の div があります...

<div id="comments">
   <div id="box">
       ...
   </div>
</div>

ボックスの div は position: fixed で、ほとんど問題なく動作しますが...

私が望むのは、ボックス div がすべてのコンテンツの上に「浮かぶ」のではなく、コメント div 内でのみスクロールできるようにすることです。

これには JavaScript を使用する必要がありますか?

score 2 · Accepted Answer

これにはJSは必要ありません。overflow:scroll を追加して、外側の DIV を固定サイズに設定するだけです。次に、内部 DIV が外部 div よりも大きい場合、スクロールバーが表示されます

こちらのページでお試しいただけます

score 1 · Accepted Answer

<style>
    #comments { overflow: auto; height: 200px; }
</style>

<div id="comments">
   <div id="box">
       ...
   </div>
</div>

コンテナー div ( comments ) に適切な高さを指定すると、コンテンツがコンテナーの高さを超える場合、oveflow auto によってスクロールバーが作成されます。

2 に答える 2