Menu
I have my HTML, CSS set up as per the code below. I have also added a JSFiddle link since it will be far more convenient to see the code in action.
The problem I'm having is that when there is a lot of text in the #inner-right div within the #right-col div, I want a scrollbar to appear for #inner-right only. My current code shows two scrollbars: #inner-div and #right-col. If I change the CSS on #right-col to overflow: hidden so as to get rid of the outer scroll-bar, the inner scroll bar disappears as well, and #inner-right no longer respects the max-height rule.
How can I set it up such that the scroll bar only shows up on #inner-right when it's contents grow too large.
JSFiddle
html, body { height: 100%; } #wrapper { height: 100%; display: table; width: 700px; } #header, #footer { display: table-row; height: 30px; } #body { height: 100%; display: table-row; background: rgba(255, 0, 0, 0.5); } #left-col, #right-col { display: inline-block; width: 320px; height: 100%; max-height: 100%; margin-right: 20px; border: 2px black solid; vertical-align: top; padding: 3px; overflow: auto; } #inner-right { height: 100%; max-height: 100%; overflow: auto; background: ivory; }<div id="wrapper"> <div id="header">Header</div> <div id="body"> <div id="left-col"> Lorem ipsum ... little text </div> <div id="right-col"> <div id="header-text">Header</div> <div id="inner-right"> Lorem ipsum ...lots of text </div> </div> </div> <div id="footer">Footer</div> </div>
700
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.
With the hidden value, the overflow is clipped, and the rest of the content is hidden: 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.
Height % is based on it's parent (so you have to set every element above the target element to 100%) , there are a few workarounds to this though. For instance you can set it to height: 100vh; This will create the element to be 100% of your window height. Or you can use px instead.
If you make
overflow: hidden in the outer div and overflow-y: scroll in the inner div it will work.
http://jsfiddle.net/C8MuZ/11/
189
This would work just fine, set the height to desired pixel
#inner-right{ height: 100px; overflow:auto; } 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
