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.
html, body {_x000D_
height: 100%; _x000D_
}_x000D_
#wrapper {_x000D_
height: 100%;_x000D_
display: table;_x000D_
width: 700px;_x000D_
}_x000D_
#header, #footer {_x000D_
display: table-row;_x000D_
height: 30px;_x000D_
}_x000D_
#body {_x000D_
height: 100%;_x000D_
display: table-row;_x000D_
background: rgba(255, 0, 0, 0.5);_x000D_
}_x000D_
#left-col, #right-col {_x000D_
display: inline-block;_x000D_
width: 320px;_x000D_
height: 100%;_x000D_
max-height: 100%;_x000D_
margin-right: 20px;_x000D_
border: 2px black solid;_x000D_
vertical-align: top;_x000D_
padding: 3px;_x000D_
overflow: auto; _x000D_
}_x000D_
#inner-right {_x000D_
height: 100%;_x000D_
max-height: 100%;_x000D_
overflow: auto;_x000D_
background: ivory;_x000D_
}<div id="wrapper">_x000D_
<div id="header">Header</div>_x000D_
<div id="body">_x000D_
<div id="left-col">_x000D_
Lorem ipsum ... little text_x000D_
</div>_x000D_
<div id="right-col">_x000D_
<div id="header-text">Header</div>_x000D_
<div id="inner-right">_x000D_
Lorem ipsum ...lots of text_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
<div id="footer">Footer</div>_x000D_
</div>It might be easier to use JavaScript or jquery for this. Assuming that the height of the header and the footer is 200 then the code will be:
function SetHeight(){
var h = $(window).height();
$("#inner-right").height(h-200);
}
$(document).ready(SetHeight);
$(window).resize(SetHeight);
This would work just fine, set the height to desired pixel
#inner-right{
height: 100px;
overflow:auto;
}
set this :
#inner-right {
height: 100%;
max-height: 96%;//change here
overflow: auto;
background: ivory;
}
this will solve your problem.
Source: Stackoverflow.com