Расширить div до нижней части страницы (только HTML и CSS)

Это очень простая проблема, но я не могу найти подходящее решение в Интернете. Я хочу иметь список элементов в естественном потоке с последним элементом, расширенным до нижней части страницы. Поэтому, если у меня есть

<div id="top" style="height:50px;"></div>
<div id="bottom" style="background:lightgrey;"></div>

Мне нужно, чтобы элемент bottom простирался от нижней части top до нижней части страницы. Любое решение, которое использует только html и css, приветствуется, и вы можете добавлять контейнеры div или что угодно, если я могу получить динамическое изменение размера bottom div

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

вот скрипка для всех ваших возишних потребностей: http://jsfiddle.net/8QnLA/

Ответ 1

Решение: # 1: css tables:

html, body {
  height: 100%;
  width: 100%;
}
body {
  display: table;
  margin: 0;
}
#top, #bottom {
  width: 100%;
  background: yellow;
  display: table-row;
}
#top {
  height: 50px;
}
#bottom {
  background: lightgrey;
  height: 100%;
}

html, body {
  height: 100%;
  width: 100%;
}
body {
  display: table;
  margin: 0;
}
#top, #bottom {
  width: 100%;
  background: yellow;
  display: table-row;
}
#top {
  height: 50px;
}
#bottom {
  background: lightgrey;
  height: 100%;
}

<div id="top" style="height:50px;"><span>A header</span></div>
<div id="bottom" style="background:lightgrey;"><span>The content area - extends to the bottom of the page</span></div>

Ответ 2

Задайте высоту от html, body до 100%. Затем вы можете установить максимальную высоту <div> на 100%, и она будет такой же высокой, как и окно. Поскольку вы, вероятно, не хотите прокрутки, вы можете установить overflow: hidden на html, body.

http://jsfiddle.net/GKbzx/