Высота области содержимого 100% принимая во внимание заголовок

Question

Я пытаюсь заполнить длину экрана, но моя область содержимого высотой 100% игнорирует заголовок, который затем делает область слишком длинной. Другие решения SO не будут полностью работать.

Мне нужно уметь корректировать растущий контент (с полосой прокрутки на странице не #mainView), и когда содержимого страницы недостаточно, чтобы заполнить страницу, #mainView должен заполнить экран (без прокрутка).

http://jsfiddle.net/SsF8S/6/

CSS:

html, body { height: 100%; margin: 0px; } 
#container{margin:20px;height:100%} 
#header { height: 80px; background: pink; } 
#mainView { height: 100%; background: red; box-sizing: border-box; border:solid 4px pink;border-top:none; } 

HTML:

<div id="container"> 
    <div id="header"> 
    --Header 
    </div> 
    <div id="mainView"> 
    --Main 
    </div> 
</div> 

Answer 1

Пусть заголовок наложения основного вида, и площадка в верхней части главного окна, чтобы избежать этого:

#header { 
    height:80px; 
    background:black; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
} 

#mainView { 
    height:100%; 
    background:red; 
    padding-top: 80px; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 

Обновлено jsFiddle с этим решением: http://jsfiddle.net/upQpj/

Answer 2

Вы должны использовать коробчатого проклейки:
См http://jsfiddle.net/SsF8S/4/

CSS

html,body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    overflow: hidden; 
} 
#header { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 80px; 
    background: black; 
    z-index: 1; 
} 
#wrapper { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    padding: 80px 0 0 0; 
    background: red; 
    z-index: 0; 
    overflow: hidden; 
} 
#mainView { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
} 

Html

<div id="header"> 
    --Header 
</div> 
<div id="wrapper"> 
    <div id="mainView"> 

    </div> 
</div> 

Answer 3

У вас может быть основной контейнер.

<style type="text/css"> 

html,body{height:100%;margin:0px;} 
#header{height:80px;background:black;} 
#container{height:100%; background:red;} 

</style> 

<div id="container"> 
<div id="header"> 
    --Header 
</div> 
<div id="mainView"> 
    --Main 
</div> 
</div> 

Answer 4

Несколько небольших изменений в CSS вашего MainView в ...

Сделать absolute, устанавливая top, left, bottom и right свойства. Затем просто удалите старую высоту и измените переполнение, чтобы добавить полосу прокрутки, когда это необходимо.

#mainView { 
    background:red; 
    position:absolute; 
    top:80px; 
    bottom:0; 
    right:0; 
    left:0; 
    overflow:auto; 
} 

И jFiddle пример: http://jsfiddle.net/SsF8S/2/