Div с переменной высотой

Question

Я создал страницу с тремя таблицами. Вторая таблица находится внутри div с overflow: auto.

Моя проблема именно в этой таблице. Мне нужна вся страница, высота которой не превышает 100%.
- первая таблица всегда должна быть видна в верхней части страницы;
- Третья таблица всегда должна быть видна в нижней части страницы;
- Вторая таблица должна иметь свою высоту в зависимости от пространства, оставшегося для завершения 100% браузера.

Кто-нибудь знает, как решить мою дилемму?

Вот демонстрация кода: http://jsbin.com/omeRUtIr/7/edit?html,css,output

Answer 1

Вам нужно сделать что-то вроде этого:

#header { 
    position: absolute; 
    top: 0px; 
    width: 100%; 
    height: 50px; 
} 

#content { 
    position: absolute; 
    top: 50px; 
    bottom: 50px; 
    overflow: auto; 
    width: 100%; 
} 

#footer { 
    position: absolute; 
    bottom: 0px; 
    width: 100%; 
    height: 50px; 
} 

Вы можете увидеть результат здесь: http://jsbin.com/omeRUtIr/13/edit

Вы также можете использовать процент (вместо фиксированной высоты), если вы хотите, чтобы каждая таблица имела одну треть высоты, например. Вы получите что-то вроде этого: http://jsbin.com/omeRUtIr/15/edit.