CSS html 100 % width height layout

Question

I am trying to build a layout that consumes all the space that is visible in browser. I set html, body height 100% as was suggested in different SO posts. Following is the markup that I am trying

<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 content div height cause the whole body to grow and hence the browser's default scroll bars are shown. Though I have set the container div to scroll in order to display the content of content div, still the scroll bars for container div don't show. How can I fix this.

here is the jsfiddle

Answer 1

Edited:

By default the height of the div element depends on its content (unlike width which takes 100% width of the parent). That's why when you specify the height of inner element as a percentage it won't be accurate if your parent tag has no explicitly defined height (that means height has to be defined up to the very top of the DOM since height is not inheritable).

In your case you need to add height: 100%; or any other height to your .container , .main and the wrapper div

modified fiddle