html - 如何将容器放置在固定位置并有自己的溢出？

Question

我想要一个导航栏，在它下面有一个容器。

<div>
 <nav>...</nav>
 <div id="container"></div>
</div>

如果可能的话，我希望有一个容器，如果它本身是一个单独的页面，它的行为也是如此。

因此，如果我开始用内容填充#container，我希望它是否有溢出并且它不会改变大小。就像 #container 将是一个内部网站。

Answer 1

这样的事情应该可行。

nav {
padding: 10px; 
box-sizing: border-box;
text-align: center;
width: 100%;
background-color: aliceblue;
}

body, html {
margin: 0;
height: 100%;
}

body {
display: grid;
grid-template-rows: 0fr 1fr;
-ms-grid-template-columns: 0fr 1fr;
}

#container {
padding-top: 10px;
overflow-y: scroll;
}

<nav>
 NAV
 </nav>
 <div id="container">
 Lorem ipsum dolor sit amet consectetur adipiscing elit ullamcorper congue facilisis, vehicula sociosqu gravida aliquet tempus risus volutpat viverra faucibus, proin pretium mi nulla cubilia nisl quisque interdum ridiculus. Viverra et suscipit massa eleifend rhoncus cubilia euismod, pharetra curae dictumst sem parturient varius faucibus, pellentesque vulputate feugiat magnis penatibus taciti. Pulvinar cubilia cursus justo interdum fringilla sollicitudin quisque vestibulum, pretium rutrum ridiculus arcu tortor class placerat pellentesque dictumst, tincidunt potenti risus facilisi posuere magna mauris. Orci nec mattis purus id sapien tellus vitae inceptos parturient montes, lacus quisque tincidunt ullamcorper at integer nisi sed laoreet malesuada, eu fusce sagittis nostra cras egestas habitant litora molestie.

Cursus tortor tincidunt pretium hac tellus cubilia lectus a congue aliquam purus, cras magna suspendisse eget semper vel integer est iaculis interdum, eleifend urna imperdiet nam scelerisque volutpat curae consequat fusce nisl. Blandit integer vel cubilia enim senectus luctus commodo aliquet libero, pellentesque sed class congue erat porta lectus justo, in etiam leo cras nam eu ultricies ligula. Lacus habitasse semper venenatis molestie at quisque condimentum suspendisse, facilisis dictum integer auctor vitae nibh hendrerit euismod proin, enim class ut sem pulvinar convallis vel.

Nisl ac quis ut risus quam vestibulum litora maecenas, primis non aptent natoque libero porttitor sagittis scelerisque, suspendisse pretium justo nam facilisi diam donec. Velit imperdiet semper hendrerit nec lobortis eu dictum augue, felis nostra scelerisque feugiat rhoncus dapibus purus cras, gravida venenatis sapien eget suscipit molestie cum. At velit ac facilisis cubilia cum nisi parturient, montes quam per praesent cras integer sollicitudin vehicula, duis accumsan mus non semper nisl.

Nisl euismod diam pellentesque litora aenean taciti hendrerit sagittis varius blandit, neque dapibus commodo imperdiet ultricies sodales senectus eu maecenas congue, est sed mollis nam phasellus hac malesuada nullam arcu. Suscipit mi at dictumst taciti faucibus nunc magnis senectus condimentum, laoreet erat massa ante platea hac habitasse fames, suspendisse augue magna conubia maecenas eleifend interdum luctus. Dictumst nunc convallis nec est pellentesque et cursus, mi eget tortor ultricies ultrices malesuada inceptos bibendum, vel netus morbi varius viverra felis. Faucibus elementum vulputate pharetra magna sagittis leo scelerisque conubia, ut aliquet feugiat laoreet volutpat massa praesent, donec semper odio ante iaculis egestas cum.

Lorem ipsum dolor sit amet consectetur adipiscing elit ullamcorper congue facilisis, vehicula sociosqu gravida aliquet tempus risus volutpat viverra faucibus, proin pretium mi nulla cubilia nisl quisque interdum ridiculus. Viverra et suscipit massa eleifend rhoncus cubilia euismod, pharetra curae dictumst sem parturient varius faucibus, pellentesque vulputate feugiat magnis penatibus taciti. Pulvinar cubilia cursus justo interdum fringilla sollicitudin quisque vestibulum, pretium rutrum ridiculus arcu tortor class placerat pellentesque dictumst, tincidunt potenti risus facilisi posuere magna mauris. Orci nec mattis purus id sapien tellus vitae inceptos parturient montes, lacus quisque tincidunt ullamcorper at integer nisi sed laoreet malesuada, eu fusce sagittis nostra cras egestas habitant litora molestie.

Cursus tortor tincidunt pretium hac tellus cubilia lectus a congue aliquam purus, cras magna suspendisse eget semper vel integer est iaculis interdum, eleifend urna imperdiet nam scelerisque volutpat curae consequat fusce nisl. Blandit integer vel cubilia enim senectus luctus commodo aliquet libero, pellentesque sed class congue erat porta lectus justo, in etiam leo cras nam eu ultricies ligula. Lacus habitasse semper venenatis molestie at quisque condimentum suspendisse, facilisis dictum integer auctor vitae nibh hendrerit euismod proin, enim class ut sem pulvinar convallis vel.

Nisl ac quis ut risus quam vestibulum litora maecenas, primis non aptent natoque libero porttitor sagittis scelerisque, suspendisse pretium justo nam facilisi diam donec. Velit imperdiet semper hendrerit nec lobortis eu dictum augue, felis nostra scelerisque feugiat rhoncus dapibus purus cras, gravida venenatis sapien eget suscipit molestie cum. At velit ac facilisis cubilia cum nisi parturient, montes quam per praesent cras integer sollicitudin vehicula, duis accumsan mus non semper nisl.

Nisl euismod diam pellentesque litora aenean taciti hendrerit sagittis varius blandit, neque dapibus commodo imperdiet ultricies sodales senectus eu maecenas congue, est sed mollis nam phasellus hac malesuada nullam arcu. Suscipit mi at dictumst taciti faucibus nunc magnis senectus condimentum, laoreet erat massa ante platea hac habitasse fames, suspendisse augue magna conubia maecenas eleifend interdum luctus. Dictumst nunc convallis nec est pellentesque et cursus, mi eget tortor ultricies ultrices malesuada inceptos bibendum, vel netus morbi varius viverra felis. Faucibus elementum vulputate pharetra magna sagittis leo scelerisque conubia, ut aliquet feugiat laoreet volutpat massa praesent, donec semper odio ante iaculis egestas cum.

Lorem ipsum dolor sit amet consectetur adipiscing elit ullamcorper congue facilisis, vehicula sociosqu gravida aliquet tempus risus volutpat viverra faucibus, proin pretium mi nulla cubilia nisl quisque interdum ridiculus. Viverra et suscipit massa eleifend rhoncus cubilia euismod, pharetra curae dictumst sem parturient varius faucibus, pellentesque vulputate feugiat magnis penatibus taciti. Pulvinar cubilia cursus justo interdum fringilla sollicitudin quisque vestibulum, pretium rutrum ridiculus arcu tortor class placerat pellentesque dictumst, tincidunt potenti risus facilisi posuere magna mauris. Orci nec mattis purus id sapien tellus vitae inceptos parturient montes, lacus quisque tincidunt ullamcorper at integer nisi sed laoreet malesuada, eu fusce sagittis nostra cras egestas habitant litora molestie.

Cursus tortor tincidunt pretium hac tellus cubilia lectus a congue aliquam purus, cras magna suspendisse eget semper vel integer est iaculis interdum, eleifend urna imperdiet nam scelerisque volutpat curae consequat fusce nisl. Blandit integer vel cubilia enim senectus luctus commodo aliquet libero, pellentesque sed class congue erat porta lectus justo, in etiam leo cras nam eu ultricies ligula. Lacus habitasse semper venenatis molestie at quisque condimentum suspendisse, facilisis dictum integer auctor vitae nibh hendrerit euismod proin, enim class ut sem pulvinar convallis vel.

Nisl ac quis ut risus quam vestibulum litora maecenas, primis non aptent natoque libero porttitor sagittis scelerisque, suspendisse pretium justo nam facilisi diam donec. Velit imperdiet semper hendrerit nec lobortis eu dictum augue, felis nostra scelerisque feugiat rhoncus dapibus purus cras, gravida venenatis sapien eget suscipit molestie cum. At velit ac facilisis cubilia cum nisi parturient, montes quam per praesent cras integer sollicitudin vehicula, duis accumsan mus non semper nisl.

Nisl euismod diam pellentesque litora aenean taciti hendrerit sagittis varius blandit, neque dapibus commodo imperdiet ultricies sodales senectus eu maecenas congue, est sed mollis nam phasellus hac malesuada nullam arcu. Suscipit mi at dictumst taciti faucibus nunc magnis senectus condimentum, laoreet erat massa ante platea hac habitasse fames, suspendisse augue magna conubia maecenas eleifend interdum luctus. Dictumst nunc convallis nec est pellentesque et cursus, mi eget tortor ultricies ultrices malesuada inceptos bibendum, vel netus morbi varius viverra felis. Faucibus elementum vulputate pharetra magna sagittis leo scelerisque conubia, ut aliquet feugiat laoreet volutpat massa praesent, donec semper odio ante iaculis egestas cum.
 </div>