Сделать DIV заполнить оставшуюся высоту окна браузера без яваскрипта

Question

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

Первый div находится в верхней части страницы и имеет статическую высоту. Второй div должен заполнить оставшееся пространство на дно. Как я могу достичь этого без javascript или jQuery?

Answer 1

Совместимость на всех браузерах

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
.head { 
 
    height: 100px; 
 
    top: 0; 
 
    width: 100%; 
 
    background: #00963F; 
 
    position: absolute; 
 
    border-width: 5px 5px 0 5px; 
 
    border-style: solid; 
 
    border-color: white; 
 
    color: white; 
 
    text-align: center; 
 
} 
 
.cont { 
 
    position: absolute; 
 
    top: 100px; 
 
    width: 100%; 
 
    bottom: 0px; 
 
    background: #27338B; 
 
    border-width: 5px; 
 
    border-style: solid; 
 
    border-color: white; 
 
    color: white; 
 
    text-align: center; 
 
}

<div class="head">Fixed height</div> 
 
<div class="cont">Rest of the browser height</div>

Answer 2

Для этого вы можете использовать функцию calc().

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
#top { 
 
    background: #00A743; 
 
    height: 100px; 
 
} 
 
#bottom { 
 
    background: #40008B; 
 
    height: calc(100% - 100px); 
 
}

<div id="top"></div> 
 
<div id="bottom"></div>

Answer 3

Вы могли бы сделать это.

#div1 
{ 
    position:absolute; 
    display: block; 
    height: 200px; 
    width: 100%; 
    top: 0px; 
    background-color: #900; 
} 

#div2 
{ 
    position:absolute; 
    display: block; 
    height: 200px; 
    width: 100%; 
    top: 200px; 
    background-color: #090; 
}