没有固定高度的滚动条带有滚动条的动态高度

没有固定高度的滚动条/带有滚动条的动态高度

Flexbox是一种现代替代方案，可让您无需固定高度或Javascript即可执行此 *** 作。

设置

display: flex; flex-direction: column;

在容器上，并

flex-shrink:0;

在页眉和页脚的div的伎俩：

HTML：

<div id="body">    <div id="head">        <p>Dynamic size without scrollbar</p>        <p>Dynamic size without scrollbar</p>        <p>Dynamic size without scrollbar</p>      </div>    <div id="content">        <p>Dynamic size with scrollbar</p>        <p>Dynamic size with scrollbar</p>        <p>Dynamic size with scrollbar</p>        <p>Dynamic size with scrollbar</p>        <p>Dynamic size with scrollbar</p>        <p>Dynamic size with scrollbar</p>        <p>Dynamic size with scrollbar</p>        <p>Dynamic size with scrollbar</p>        <p>Dynamic size with scrollbar</p>        <p>Dynamic size with scrollbar</p>        <p>Dynamic size with scrollbar</p>        <p>Dynamic size with scrollbar</p>        <p>Dynamic size with scrollbar</p>        <p>Dynamic size with scrollbar</p>        <p>Dynamic size with scrollbar</p>        <p>Dynamic size with scrollbar</p>        <p>Dynamic size with scrollbar</p>        <p>Dynamic size with scrollbar</p>        <p>Dynamic size with scrollbar</p>        <p>Dynamic size with scrollbar</p>        <p>Dynamic size with scrollbar</p>        <p>Dynamic size with scrollbar</p>        <p>Dynamic size with scrollbar</p>    </div>    <div id="foot">        <p>Fixed size without scrollbar</p>        <p>Fixed size without scrollbar</p>    </div>  </div>

CSS：

#body {    position: absolute;    top: 150px;    left: 150px;    height: 300px;    width: 500px;    border: black dashed 2px;    display: flex;    flex-direction: column;}#head {    border: green solid 1px;    flex-shrink: 0;}#content{    border: red solid 1px;    overflow-y: auto;    }#foot {    border: blue solid 1px;    height: 50px;    flex-shrink: 0;}