100% - 200px

AntonSolo · January 23, 2009

Читал на форумах, но окончательного ответа так и не нашол.

Есть три блока

height:200px;

center:100%;

footer:200px;

как создать такой макет, чтобы при отсутствии в center контента правый скрол(вертикальный) отсутствовал, тоесть center = 100% - 400px. А верстка занимала весь экран в зависимостим от расширения. НЕ используя JS ?

rus · January 23, 2009

центр не может сам по себе 100% быть, он отсчитывается от родителя (body, html), в этом случае у вас получится 100%+200px+200px ->>body+html

Scrum · January 23, 2009

http://forum.htmlbook.ru/index.php?showtopic=11887

учитесь пользоваться поиском.

SelenIT · January 23, 2009

Минимальный (имхо) вариант:

<!doctype html>
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100%; position: relative; background: #eee; }
html>body { height: auto; min-height: 100%; } /* все, кроме IE6 */
.header, .footer { height: 200px; width: 100%; position: absolute; }
.header { background: #fcc; top: 0; }
.footer{ background: #cfc; bottom: 0; }
.center { padding: 200px 0; }
</style>
<div class="header">Header</div>
<div class="center">Center</div>
<div class="footer">Footer</div>

AntonSolo · January 25, 2009

В 7 ИЕ не работает , дальше даже не проверял(не работает когда конте6нт привышает высоту окна!)

SelenIT · January 25, 2009

Одно из двух: или я неверно понял задачу из вашего описания, или у вас ошибка при воспроизведении (99%, что доктайп пропущен). Потому что в приведенном примере "не работать" буквально нечему .

Edited January 25, 2009 by SelenIT

AntonSolo · January 25, 2009

Если много контента футер к низу не прижимается

SelenIT · January 25, 2009

1) К низу чего - окна или страницы?

2) Доктайп какой?

AntonSolo · January 26, 2009

К низу страницы конечно

SelenIT · January 26, 2009

Значит, я понял правильно . Хотите сказать, что приведенный код (если скопировать его один-в-один, только в center засунуть побольше текста) ведет себя по-другому?

AntonSolo · January 26, 2009

Да, он не кроуссброузерный!!!

Я просто уже нашёл решение с помощью JavaScript

SelenIT · January 26, 2009

AntonSolo, без понимания принципов всё некроссбраузерное, яваскрипт в первую очередь. Впрочем, не хотите разобраться со своей ошибкой - дело ваше. Просто вы с ней еше не раз столкнетесь, знаю по опыту...

Sign In

100% - 200px

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information