CSS layout with top and bottom sections in left sidebar

Question

I'm trying to create a HTML/CSS layout with a left sidebar that contains top and bottom sections.

The container should be the full height of the page and more.

The height of the top section within the sidebar should be between 0 and a maximum of 40% of the height of the container depending upon the content within the section.

The height of the bottom section should be the remainder of the available height within the container.

The three sections should each have a vertical scroll bar if each section overflows content.

The problem is with the bottom section of the sidebar.

The diagram below shows the layout:

 html, body { margin: 0; padding: 0; height: 100%; } .container:before, .container:after { content: ""; display: table; } .container:after { clear: both; } .container { height: 100vh; overflow: hidden; zoom: 1; /* For IE 6/7 (trigger hasLayout) */ } .left { float:left; min-width: 200px; height:100%; background-color: #eee; } .right { min-width: 200px; height:100%; background-color: #ddd; overflow: auto; } .top { max-height: 20%; background-color: #ee4400; overflow: auto; } .bottom { background-color: #ff0000; overflow: auto; max-height: 80%; } ul { margin: 0; padding: 0 30px ; } 

 <div class="container"> <div class="left"> <div class="top"> <ul> <!-- Enter more list elements to grow this section --> <li>Item</li> <li>Item</li> <li>Item</li> </ul> </div> <div class="bottom"> <ul> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul> </div> </div> <div class="right"> <ul> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul> </div> </div> 

Answer 1

To get what I think you are after change the backgound color of .left to be the same as the background color for .bottom. Alternatively, you could set the height of .top to 20% and .bottom to 80% but that won't give you the exact same result

 html, body { margin: 0; padding: 0; height: 100%; } .container:before, .container:after { content: ""; display: table; } .container:after { clear: both; } .container { height: 100vh; overflow: hidden; zoom: 1; /* For IE 6/7 (trigger hasLayout) */ } .left { float:left; min-width: 200px; height:100%; background-color: red; } .right { min-width: 200px; height:100%; background-color: green; overflow: auto; } .top { max-height: 20%; background-color: yellow; overflow: auto; } .bottom { background-color: red; overflow: auto; max-height: 80%; } ul { margin: 0; padding: 0 30px ; } 

 <div class="container"> <div class="left"> <div class="top"> <ul> <!-- Enter more list elements to grow this section --> <li>Item</li> <li>Item</li> <li>Item</li> </ul> </div> <div class="bottom"> <ul> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul> </div> </div> <div class="right"> <ul> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul> </div> </div> 

 html, body { margin: 0; padding: 0; height: 100%; } .container:before, .container:after { content: ""; display: table; } .container:after { clear: both; } .container { height: 100vh; overflow: hidden; zoom: 1; /* For IE 6/7 (trigger hasLayout) */ } .left { float:left; min-width: 200px; height:100%; background-color: #eee; } .right { min-width: 200px; height:100%; background-color: #ddd; overflow: auto; } .top { max-height: 20%; background-color: #ee4400; overflow: auto; } .bottom { background-color: #ff0000; overflow: auto; max-height: 80%; } ul { margin: 0; padding: 0 30px ; } 

 <div class="container"> <div class="left"> <div class="top"> <ul> <!-- Enter more list elements to grow this section --> <li>Item</li> <li>Item</li> <li>Item</li> </ul> </div> <div class="bottom"> <ul> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul> </div> </div> <div class="right"> <ul> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul> </div> </div> 

Answer 2

I managed to resolve it by using a flexbox column in the left sidebar which works really well.

 html, body { margin: 0; padding: 0; height: 100%; } .container:before, .container:after { content: ""; display: table; } .container:after { clear: both; } .container { height: 100vh; overflow: hidden; zoom: 1; /* For IE 6/7 (trigger hasLayout) */ } .left { float:left; min-width: 200px; height:100%; background-color: #eee; display: flex; flex-direction: column; } .right { min-width: 200px; height:100%; background-color: #ddd; overflow: auto; } .top { max-height: 20%; background-color: #ee4400; overflow: auto; flex-shrink: 0; } .bottom { background-color: #ff0000; overflow: auto; flex-grow: 1; } ul { margin: 0; padding: 0 30px ; } 

 <div class="container"> <div class="left"> <div class="top"> <ul> <!-- Enter more list elements to grow this section --> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul> </div> <div class="bottom"> <ul> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul> </div> </div> <div class="right"> <ul> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul> </div> </div>