Три строки div-ми

Необходимо сверстать макет страницы таким образом, чтобы он состоял из трех строк — div-ов.

Верхняя и нижняя строки фиксированной высоты, верхняя прижата к верхней части страницы, нижняя строка прижата к нижней части страницы.

Основной контент в цетральной строке, в ней при нехватке места должен появляться скрол. Центральный div должен всегда занимать всю доступную высоту, которая осталась от верхней и нижней строк.

Таблицами с фреймами я такое делать умею. Хотелось бы научиться делать div-ми, посмотреть как люди живут. Пробовал всякие генераторы шаблонов, не нашел подходящего варианта.
  • Вопрос задан
  • 3714 просмотров
Пригласить эксперта
Ответы на вопрос 4
dudeonthehorse
@dudeonthehorse
Email Developer
верхний див с фиксированной шириной.
нижний див так же фиксированный.
центральному диву скриптом определяем высоту, равную высота окна браузера минус высота 2-х фиксированных дивов. этому же центральному диву устанавливаем overflow:auto;
Ответ написан
Desiderata
@Desiderata
можно сделать к примеру так.
Ответ написан
dom1n1k
@dom1n1k
Скрипты тут штука излишняя.
Вот набросал приблизительную канву: dom1n1k.name/dump/habr-qa6300.html
Оговорюсь: в IE6 не работает (он не умеет задавать размер абсолютно спозиционированных элементов по 4 отступам), начиная с 7-ки должно быть по идее нормально.
Ответ написан
Alexx_ps
@Alexx_ps
Даю CSS. Теги, надеюсь, сами сможете расставить. И не забудьте сброс стилей сделать.

#wrapper {
width: 960px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
}

#header {
height: 110px;
background: #FFE680;
}

#content {
padding: 0 0 70px;
}

#footer {
width: 960px;
margin: -70px auto 0;
height: 70px;
background: #BFF08E;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы