My goal is to create a layout that fills the entire visible space in the browser. I followed suggestions from various Stack Overflow posts by setting html, body height 100%. Below is the markup I am currently using:
<div>
<div class="header">
</div>
<div class="main">
<div class="container">
<div class="content"></div>
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
max-height: 100%;
}
.header {
height: 30px;
background-color: #000;
}
.main {
height: auto;
padding-right: 0px;
max-height: 100%;
width: 100%;
display: block;
clear: both;
background-color: #eee;
}
.container {
width: 90%;
overflow-y: scroll;
background-color: #ccc;
}
.content {
height: 2000px;
width: 80%;
background-color: #fff;
}
The height of the content div causes the entire body to expand, resulting in the default browser scroll bars being displayed. Although I set the container div to scroll for the purpose of showing the content within the content div, the scroll bars for the container div are not appearing. How can I resolve this issue?
Here is the jsfiddle