CSS html 100% width height layout

Question

Я пытаюсь создать макет, который расходует все пространство, которое видно в браузере. Я установил html, body height 100%, как было предложено в разных сообщениях SO. Ниже разметка, что я пытаюсь

<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; 
} 

высота DIV содержания вызывает все тело расти и, следовательно, прокрутки по умолчанию полосы браузера отображается. Хотя я установил div контейнера для прокрутки, чтобы отображать содержимое содержимого div, все же полосы прокрутки для контейнера div не отображаются. Как я могу это исправить.

вот jsfiddle

Answer 1

Отредактирован:

По умолчанию height элемента сНа зависит от его содержания (в отличие от width, который принимает ширину 100% от родителей). Поэтому, когда вы указываете высоту внутреннего элемента в процентах, это будет неточно, если ваш родительский тег не имеет явно определенной высоты (это означает, что высота должна быть определена до самого верха DOM, так как высота не наследуется) ,

В вашем случае вам нужно добавить height: 100%; или любую другую высоту к .container, .main и оберткам div

modified fiddle