我的页面中有以下代码段：
<div class="main">
<div class="header">
<div class="heading">Heading</div>
<div>Arbitrary amount of header content.</div>
</div>
<div class="body">
<div>Arbitrary amount of body content.</div>
</div>
</div>
我希望.body div中的.main可以垂直滚动，而.header仍然位于顶部。
我将a short example using JSFiddle与整个.main滚动放在一起。
我已经搜索并寻找其他解决方案，但它们似乎都涉及具有固定的标题高度（我没有）或使用一些可怕的表结构（如在this JSFiddle中）。
编辑：其他一些限制：解决方案需要支持IE9并做出响应（即.main无论高度如何都应该有效。）
答案 0 :(得分：2)
让父母为flex column，将.body设为flex-grow: 1和overflow-y: scroll
.main {
width: 500px;
height: 400px;
background-color: rgba(255, 0, 0, 0.1);
display: flex;
flex-direction: column;
}
.header {
background-color: rgba(0, 0, 255, 0.1);
padding: 8px;
}
.header .heading {
font-size: 16px;
margin-bottom: 8px;
font-weight: bold;
}
.body {
padding: 8px;
flex: 1 0 0;
overflow-y: scroll;
}<div class="main">
<div class="header">
<div class="heading">Heading</div>
<div>Arbitrary amount of content</div>
</div>
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis volutpat eros euismod ultricies. Mauris non faucibus tellus, quis iaculis eros. Aenean eu accumsan ex. Phasellus fringilla congue turpis sed rutrum. Nulla porttitor ornare consequat. Quisque scelerisque arcu nec dignissim malesuada. Nullam finibus ligula dolor, nec sodales lacus finibus eu. Quisque scelerisque tortor et ante malesuada ullamcorper. Aliquam at condimentum lectus. Integer dictum tempus odio, sit amet molestie augue mattis scelerisque. Ut sed euismod sapien.</p>
<p>Nunc tempus blandit nisl, maximus porttitor erat tempor quis. Donec lectus lorem, sagittis ut molestie id, porta eget dolor. Donec placerat finibus commodo. Fusce euismod rhoncus diam id porttitor. Aliquam magna est, auctor quis lorem in, fermentum finibus libero. Mauris aliquam lacus sit amet libero facilisis vehicula vitae consequat velit. Aliquam erat volutpat. Proin vel volutpat enim. Nulla dolor ipsum, maximus quis ante ut, malesuada efficitur mi. Aenean quis mi ut mi convallis pulvinar. Suspendisse pulvinar ante vitae cursus dictum. Duis vehicula venenatis magna sed porttitor. Phasellus vitae risus finibus, pulvinar ligula sed, feugiat augue. Suspendisse potenti.</p>
<p>Nunc in nibh purus. Sed nec dui nibh. Morbi iaculis viverra diam at finibus. Fusce sollicitudin volutpat libero, id luctus nunc volutpat quis. Fusce pretium in magna vel lobortis. Nam volutpat ultricies lacus ac consequat. Integer cursus, nunc ut lobortis luctus, dolor arcu aliquet leo, eget faucibus dui sem ut nisl. Ut at urna metus. Morbi quis rhoncus quam, vel faucibus enim. Duis sed nisi non lacus volutpat fermentum. In ultrices nisl ut odio tincidunt, eu maximus lectus ultricies. Phasellus sit amet faucibus sem. Donec at enim finibus, aliquam diam vitae, rutrum risus. Duis finibus ultrices imperdiet.</p>
</div>
</div>
您也可以在height上设置max-height或.body，然后添加overflow-y: scroll，它就会滚动。
.main {
width: 500px;
background-color: rgba(255, 0, 0, 0.1);
}
.header {
background-color: rgba(0, 0, 255, 0.1);
padding: 8px;
}
.header .heading {
font-size: 16px;
margin-bottom: 8px;
font-weight: bold;
}
.body {
padding: 8px;
max-height: 300px;
overflow-y: scroll;
}<div class="main">
<div class="header">
<div class="heading">Heading</div>
<div>Arbitrary amount of content</div>
</div>
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis volutpat eros euismod ultricies. Mauris non faucibus tellus, quis iaculis eros. Aenean eu accumsan ex. Phasellus fringilla congue turpis sed rutrum. Nulla porttitor ornare consequat. Quisque scelerisque arcu nec dignissim malesuada. Nullam finibus ligula dolor, nec sodales lacus finibus eu. Quisque scelerisque tortor et ante malesuada ullamcorper. Aliquam at condimentum lectus. Integer dictum tempus odio, sit amet molestie augue mattis scelerisque. Ut sed euismod sapien.</p>
<p>Nunc tempus blandit nisl, maximus porttitor erat tempor quis. Donec lectus lorem, sagittis ut molestie id, porta eget dolor. Donec placerat finibus commodo. Fusce euismod rhoncus diam id porttitor. Aliquam magna est, auctor quis lorem in, fermentum finibus libero. Mauris aliquam lacus sit amet libero facilisis vehicula vitae consequat velit. Aliquam erat volutpat. Proin vel volutpat enim. Nulla dolor ipsum, maximus quis ante ut, malesuada efficitur mi. Aenean quis mi ut mi convallis pulvinar. Suspendisse pulvinar ante vitae cursus dictum. Duis vehicula venenatis magna sed porttitor. Phasellus vitae risus finibus, pulvinar ligula sed, feugiat augue. Suspendisse potenti.</p>
<p>Nunc in nibh purus. Sed nec dui nibh. Morbi iaculis viverra diam at finibus. Fusce sollicitudin volutpat libero, id luctus nunc volutpat quis. Fusce pretium in magna vel lobortis. Nam volutpat ultricies lacus ac consequat. Integer cursus, nunc ut lobortis luctus, dolor arcu aliquet leo, eget faucibus dui sem ut nisl. Ut at urna metus. Morbi quis rhoncus quam, vel faucibus enim. Duis sed nisi non lacus volutpat fermentum. In ultrices nisl ut odio tincidunt, eu maximus lectus ultricies. Phasellus sit amet faucibus sem. Donec at enim finibus, aliquam diam vitae, rutrum risus. Duis finibus ultrices imperdiet.</p>
</div>
</div>