css - 如何设置一个 div 以使用可用的浏览器高度自动调整它的高度

Question

我有一个 div ( position :fixed )，其高度取决于其中的内容。为了实现自动滚动，我添加了 overflow-y:auto 并分配了一个固定的高度。

有没有一种方法可以自动设置div的高度，以便当浏览器空间发生变化时，div的高度会相应变化，如果空间不足则出现滚动条，当有足够的可用空间时滚动条消失。

Answer 1

使用position:absolute代替position:fixed并使用左上角、右上角和底部坐标并将滚动设置为自动；

HTML 示例:

<div id="resize">
  <p>content</p><p>content</p><p>content</p><p>content</p>
</div>

CSS:

#resize {
background: #f00;
color: white;
position: absolute;
top: 100px;
left: 200px;
right: 200px;
bottom: 100px;
overflow: auto;
}

p {line-height: 3; margin: 0;}

工作示例:Here