Jump to content
  • 0

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


paska
 Share

Question

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

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

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

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

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

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

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

Заранее спс.

Edited by paska
Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0

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

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

Edited by paska
Link to comment
Share on other sites

  • 0

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

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

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

Link to comment
Share on other sites

  • 0

...

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

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

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

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

Link to comment
Share on other sites

  • 0

...

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

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

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

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

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

Link to comment
Share on other sites

  • 0

...

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

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

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

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

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

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

Link to comment
Share on other sites

  • 0

...

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

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

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

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

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

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

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

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

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

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

Link to comment
Share on other sites

  • 0

...

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

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

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy