CSS: заполнение пустого места при условии фиксированной высоты или ширины

Question

Решение не должно поддерживаться всеми браузерами.

<div id="page">
  <div id="header">&nbsp;</div>
  <div id="content">&nbsp;</div>
  <div id="footer">&nbsp;</div>
</div>

Давайте посмотрим.страница получила width:100%;height:100%.заголовок и содержимое получили оба значения width:100% (это все равно требуется?), но они получили фиксированную высоту, скажем, height: 200px и height: 500px.Теперь я хочу, чтобы нижний колонтитул заполнил остальную часть страницы.

Любое решение для этого?

Спасибо за вашу помощь.

Answer 1

вы можете использовать что-то вроде этого:

html,body,#page {height:100%}
#page {position:relative;}
#header {height:200px;background:green;}
#content {height:500px;background:grey;}
#footer {position:absolute;top:700px;bottom:0;background:red;width:100%;}

фактически вы устанавливаете position:absolute для #footer и задаете значение для top 700px; общая высота #header и #content и bottom:0, поэтому заполнит пустое пространство.

Демо: http://jsbin.com/icuza3/2

Answer 2

насколько я знаю, css3 может выполнять "математику" и простые функции см. w3c-спецификации , поиск "calc";)