Menu
I have this HTML structure:
<div id="body"> <div id="head"> <p>Dynamic height without scrollbar</p> </div> <div id="content"> <p>Dynamic height with scrollbar</p> </div> <div id="foot"> <p>Fixed height without scrollbar</p> </div> </div> I want to have the three parts inside the main part (#body) without overflow. So I need a scroll bar in the middle part.
I tried this CSS:
#content{ border: red solid 1px; overflow-y: auto; } And this:
#content{ border: red solid 1px; overflow-y: auto; height: 100%; } But neither of them work.
I made an example at JSFiddle.
Can I do this with only CSS and HTML? I'd prefer to avoid Javascript.
749
Many assume that width: 100vw is the same as width: 100% . This is true on a page that doesn't scroll vertically, but what you might not realize is that the viewport actually includes the scrollbars, too.
To get the height of the scroll bar the offsetHeight of div is subtracted from the clientHeight of div. OffsetHeight = Height of an element + Scrollbar Height. ClientHeight = Height of an element. Height of scrollbar = offsetHeight – clientHeight.
overflow: autoThe auto value is similar to scroll , but it adds scrollbars only when necessary: You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
Flexbox is a modern alternative that lets you do this without fixed heights or JavaScript.
Setting display: flex; flex-direction: column; on the container and flex-shrink: 0; on the header and footer divs does the trick:
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; /*height: 100%;*/ } #foot { border: blue solid 1px; height: 50px; flex-shrink: 0; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
