Используя CSS, чтобы захватить все доступное вертикальное пространство?

Question

Я хотел бы создать объект, который простирается от начала до нижней части страницы, но не выходит за пределы нижней части страницы. Он имеет overflow-y: auto, поэтому, если содержимое div слишком длинное, появится полоса прокрутки (только для этого, а не для всей страницы).

Я пробовал высоту: 100%, но это делает высоту равной высоте страницы ... так что, если она не начинается в самом верху страницы, она оказывается слишком высокой.

(Пример: высота окна составляет 100px; верхняя часть страницы занимает 20px; я хочу, чтобы высота была 80px. Но я хочу, чтобы она автоматически изменялась до 70px, если окно изменено до 90px.)

Можно ли это сделать без JS? Если нет, то как мне использовать JS для этого? (Использование FF 3.x, но, конечно, предпочтительнее использовать кросс-браузерное решение.)

Answer 1

Звучит так, будто вы хотите что-то вроде следующего:

#myContainer {
  position: absolute;
  top: 20px;
  bottom: 0px;
  left: 0px; /* Should include space for a sidebar, if you have one. */
  right: 0px; /* Same as above */
}

Answer 2

ОК, нашел решение - сделав позицию абсолютной и установив нижнюю часть на 0 (и вершина на верхнюю часть).

Answer 3

Вы пробовали установить для поля body значение 0?