在具有固定標題的div中滾動

Question

我的頁面中有以下代碼段：

<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的內部.main的div是垂直滾動的，而.header保持在頂部。

我整理了一個使用JSFiddle和整個.main scrollable 的簡短示例 。

我已經搜索並尋找了其他解決方案，但它們似乎都包含具有固定的標頭高度（我沒有）或使用一些可怕的表結構（ 如此JSFiddle ）。

編輯：其他一些限制：解決方案需要支持IE9並具有響應能力（即.main應該起作用，而不管其高度如何。）

Answer 1

將父級設置為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> 

您也可以只在.body上設置height或max-height ，然后添加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>