Как сделать нижнюю половину страницы занимать оставшуюся высоту?

Question

Я искал и попробовал кучу разных вещей. У меня есть переменная высота tophalf, а нижняя половина должна заполнить оставшееся пространство. JSfiddle:

http://jsfiddle.net/UCJmQ/

CSS:

.top { 
    background-color: lightblue; 
    height: 300px; 
} 
.bottom { 
    background-color: green; 
    min-height: 100px; 
    overflow: hidden; 
    height: 100%; 
} 

html, body { 
    height: 100%; 
} 

HTML:

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

</div> 

Что я вижу сейчас зеленая страница занимают высоту всего окна, а не остальные высота. Как я могу заставить его взять оставшуюся высоту?

Answer 1

http://jsfiddle.net/ph35V/

<div class="wrapper"> 
    <div class="top"> 
     300px 
    </div> 
    <div class="bottom"> 
     Remaining height 
    </div> 
</div> 

html, body { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
} 
.wrapper { 
    display: table; 
    height: 100%; 
    width: 100%; 
} 
.top { 
    display: table-row; 
    background: lightblue; 
    height: 300px; 
} 
.bottom { 
    display: table-row; 
    height: 100%; 
    background: green; 
} 

Может также использовать box-sizing: border-box или conflicting absolute positions

Answer 2

Это переменной высоты указано в CSS или нет?

От скрипки я предполагаю, что это так. Если это так, попробуйте position: absolute с left, bottom, right набором для 0 и top к верхней высоте сНа:

DEMO