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;}
