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

Question

[camperov]

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

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

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

Таблицами с фреймами я такое делать умею. Хотелось бы научиться делать div-ми, посмотреть как люди живут. Пробовал всякие генераторы шаблонов, не нашел подходящего варианта.

Answer 1

[Артур Кох]

верхний див с фиксированной шириной.
нижний див так же фиксированный.
центральному диву скриптом определяем высоту, равную высота окна браузера минус высота 2-х фиксированных дивов. этому же центральному диву устанавливаем overflow:auto;

Comments

[sl_bug]

а процентами если задать? или ие(а может еще кто) не скушает?

[sl_bug]

З.Ы. не верстальщик я. просто подумалось что должно сработать.

[Артур Кох]

а процентами от чего? процентная высота от body не работает.

[sl_bug]

во как. говорила мне мама: не лезь верстать если кодишь :)

[Артур Кох]

на jQuery это будет примерно так:
$('div.middler').css({'height':$(window).height()-$('div.top').height-$('div.bottom').height()+'px','overflow':'auto'});

[Артур Кох]

то есть так:
$('div.middler').css({'height':$(window).height()-$('div.top').height()-$('div.bottom').height()+'px','overflow':'auto'});

скобочки пропустил :)

[camperov]

>>во как. говорила мне мама: не лезь верстать если кодишь :)
Не мы такие, жизнь такая.

Хотелось это сделать без скриптов, если это возможно.

[Артур Кох]

Вариант товарища dom1n1k вам подойдет, если не будет всевозможных добавлений интерфейса, которые отображаются не всегда. Например панель администрирования.

[AFoST]

Я так (определяя высоту страницы через javascript) сверстал 1 раз страницу и имел проблемы при уменьшении размера окна. Учитываем это.

[Артур Кох]

Дописывается идентичная строчка на событие изменения размеров окна, а не только при загрузке документа. И все ок.

Answer 2

[Desiderata]

можно сделать к примеру так.

Comments

[camperov]

Что-то не то совсем. В этом примере скрол есть у хедера, а надо у контента. Также есть общий скрол на страницу, которого не должно быть.

Answer 3

[dom1n1k]

Скрипты тут штука излишняя.
Вот набросал приблизительную канву: dom1n1k.name/dump/habr-qa6300.html
Оговорюсь: в IE6 не работает (он не умеет задавать размер абсолютно спозиционированных элементов по 4 отступам), начиная с 7-ки должно быть по идее нормально.

Comments

[Артур Кох]

Вот как раз шестой ишак и поддерживается моим вариантом. Подключение jquery не критично, на основе скрипта все работает норм во всех браузерах. В вашем варианте есть один маленький косяк. При добавлении панелей интерфейса(например панель администратора cms) в залогиненном варианте ваша верстка не будет работать так как хотелось бы. И писать костыль будет еще более громоздко.

[dom1n1k]

Не совсем понял про добавление панели. Сделать так, чтобы например сверху была не одна панель, а две — а средний блок подстраивался бы под их суммарную высоту?
Не вижу никакой проблемы, даже если эта панель будет добавляться на клиенте через JS — нужно будет лишь пересчитать пару отступов (один раз, собственно при добавлении, а не в реальном времени при ресайзе окна). А уж если отдаваться статикой со стороны сервера, тем более.

[Артур Кох]

Это не проблема. Скорей непрактичность. В моем же случае пересчет будет не ручным(как у вас), а автоматическим(вам ничего пересчитывать не придется). От куда такая неприязнь к скрипту? jQuery легкая библиотека, и к тому же дает кроссбраузерный результат и может применяться далеко не только для решения этой задачи при верстке.

[dom1n1k]

Можно и автоматический пересчет сделать — вообще не вопрос. Я же написал, что это лишь общая канва. Речь о том, что пересчет будет однократным, а не реал-тайм при ресайзе (если компьютер/браузер не из свежих — скорее всего будет тормозить, мерцать при рефреше и т.п.)
Это не неприязнь к jQuery вообще, а нежелание плодить лишние сущности.

[dom1n1k]

Например, IE иногда любит при обнаружении какой-то ошибки в JS оборвать его выполнение вообще. Соответственно, споткнувшись об одну ошибку (которая может быть вообще в другом месте), JS-функционал может отвалиться вообще весь :)
Поэтому нужно всеми силами избегать завязывать на JS то, что может полностью разрушить макет страницы.

[camperov]

Неприязни к скриптам нет, скриптов в приложении и без этого будет много. Просто хотелось бы сделать верстку средсвами верстки =)

[Артур Кох]

ну вам такой вариант предложили, хотя придется костылить ;)

[camperov]

Это если решим поддерживать 6-й эксплорер =)
Я пока только в 8-м смог потестить, пока полет нормальный. Если в семерке все ок, то наверное так и оставлю.

Спасибо за советы!

Answer 4

[Alexander]

Даю 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;
}

Comments

[Alexander]

wrapper открывается перед header и закрывается перед footer