Голова, Футер - "прибиты", Контент - все что осталось между

[paska]

Всем здрасте.

Есть такой макет: ссылка.

Суть такая: нужно голову и подвал зафексировать в верх/низ, а контент что бы всегда занимал высоту (абстрактно):

contentHeight = viewport.height - footer.height - head.height;

и что бы он был между головой и подвалом.

Все, что мне пришло в голову - это растянуть блок с главным контентом абсолютным позиционированием (top: head.height, bottom: footer.height). Дальше мне нужно, что бы содержимое внутри блока с контентом центрировалось с определенной шириной. для этого ставлю еще один блок внутри, назначаю ему ширину и margin: 0 auto, а также height: 100%. При этом все гуд, но кроме осла версии 7. Че далеть?

Может у кого есть идеи как реализовать такой макет другим способом.

Заранее спс.

Edited July 24, 2011 by paska

[jumancy]

ну конечно, всем блокам дал высоту а content-y нет.

[paska]

Все, что мне пришло в голову - это растянуть блок с главным контентом абсолютным позиционированием

если дать высоту - контент возьмет высоту viewport и будет выше нужного

Edited July 25, 2011 by paska

[staff-base]

Если не <table>-фоб, то это будет простым и стабильным вариантом.

Для <div>-филов надо сделать так

<div style="минимальная высота 100%;">
  <div>Шапка</div>
  <div>Основное содержание</div>
  <div>Пустой div с высотой равной высоте подвала</div>
</div>
<div style="с отрицательным верхним полем равным высоте подвала">Подвал<div>

Что мне не нравится в хаках с футерами, так это задание отрицательных значений для margin и вообще использование margin для позиционирования как-то некошерно.

[paska]

Если не <table>-фоб, то это будет простым и стабильным вариантом.

Для <div>-филов надо сделать так

<div style="минимальная высота 100%;">
  <div>Шапка</div>
  <div>Основное содержание</div>
  <div>Пустой div с высотой равной высоте подвала</div>
</div>
<div style="с отрицательным верхним полем равным высоте подвала">Подвал<div>

Что мне не нравится в хаках с футерами, так это задание отрицательных значений для margin и вообще использование margin для позиционирования как-то некошерно.

Как растянуть

<div>Основное содержание</div>

в этом случае? Есть конкретный код?

[staff-base]

Как растянуть ...

Во-первых, зачем? Во-вторых, как правило, что-то растянуть на оставшееся место невозможно. Исключение, наверное, только таблицы.

[Rossi25]

...

Как растянуть

<div>Основное содержание</div>

в этом случае? Есть конкретный код?

Я конечо прошу прощения, но вы это смотрели http://blog.sjinks.pro/css/209-cross-browser-liquid-three-column-layout-full-height/ , Вас это не устраивает?

[paska]

...

Как растянуть

<div>Основное содержание</div>

в этом случае? Есть конкретный код?

Я конечо прошу прощения, но вы это смотрели http://blog.sjinks.pro/css/209-cross-browser-liquid-three-column-layout-full-height/ , Вас это не устраивает?

неа. потому, что там #контент не тянется на всю высоту #container'а.

[Rossi25]

...

Как растянуть

<div>Основное содержание</div>

в этом случае? Есть конкретный код?

Я конечо прошу прощения, но вы это смотрели http://blog.sjinks.pro/css/209-cross-browser-liquid-three-column-layout-full-height/ , Вас это не устраивает?

неа. потому, что там #контент не тянется на всю высоту #container'а.

Как это не тянется? он как раз и занимает всю высоту, просто отступы и поля там под шапку и подвал.

[paska]

...

Как растянуть

<div>Основное содержание</div>

в этом случае? Есть конкретный код?

Я конечо прошу прощения, но вы это смотрели http://blog.sjinks.pro/css/209-cross-browser-liquid-three-column-layout-full-height/ , Вас это не устраивает?

неа. потому, что там #контент не тянется на всю высоту #container'а.

Как это не тянется? он как раз и занимает всю высоту, просто отступы и поля там под шапку и подвал.

не так сказал.

все верно, тянется. т.е. визуально, за счет паддинг-боттом: 1000ем, марджин-боттом: -997ем. при этом в #content должен быть хоть какой контетн (насколько я понял. поправте, если не прав).

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

отдаленно вот так

[Rossi25]

...

не так сказал.

все верно, тянется. т.е. визуально, за счет паддинг-боттом: 1000ем, марджин-боттом: -997ем. при этом в #content должен быть хоть какой контетн (насколько я понял. поправте, если не прав).

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

отдаленно вот так

в том примере содержимое тоже можно не наполнять =). Картинок у вас не увидел. Чую, что тема очень близка к моей -

http://forum.htmlbook.ru/index.php?showtopic=28046 . Решения, к сожалению, не нашел пока.

[paska]

Вот так вроде работает гуд.

Нужно было добавить еще одни блок с абсолютным позиционированием и высотой в 100% внутрь первого с абсолютом. а третий (еще глубже) уже растягивается высотой в 100%. ему можно поставить position: relative и так плодить их дальше. чувствуется гавно код, т.е. много не нужного какбы. но задачу решает и многие понимают (ie7-9,ff 3.6, chrome, safari, opera 11.50)

кто потестит - заранее спс.