Растяжение хедера и футера

Victor Ananiev · June 13, 2008

Как побороть проблему:

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

Пример: http://vindex10.24ua.com/

Собственно сам документ:

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html> 
<head>
<title>Блаблабла</title>
<link rel="stylesheet" href="work/footer_down.css" />
<link rel="stylesheet" href="work/main.css" />
</head>
<body>
<div id="header">Шапка</div>
<div id="main">ГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавнаяГлавная</div>
<div id="footer">Подвал</div>
</body>
</html>

footer_down.css

html, body
{
padding:0;
margin:0;
height:100%;
} 
html>body
{
min-height:100%;
height:auto;
} 
body
{
position:relative;
}
#main
{
padding-bottom:80px;
}
#header, #footer
{
height:70px;
width:100%;
} 
#footer
{
position:absolute;
bottom:0;
}

Заранее спасибо)

Azadi · June 13, 2008

Самый простой способ исполнить ваш каприз - использовать таблицу. Я бы просто добавил oveflow:hidden для #main...

Пятница · June 13, 2008

Аналогичная ситуация с моим футером (хедер у меня бекграунд).

Посмотрите внизу: http://dnepr-city.com/

Victor Ananiev · June 14, 2008

По поводу таблиц:

Я перешел на блоки после того как один мой табличный макет растянулся на киллометр вширину, а потом перезагрузил мне камп.

На счет overflow:hidden:

Хотелось бы, что бы все было резиновым. При добавлении overflow:hidden, мы потеряем ту часть которая за границами окна.

Azadi · June 14, 2008

Вот вы хотите, чтобы у Вас при увеличении ширины #main автоматически растягивались шапка и подвал, так? Только таблицы или придется делать псевдострочки при помощи фона для BODY "как в шапке" и для еще одного вложенного блока, чтоб тянулся подвал. И тогда абсолютное позиционирование будет не к месту. Но это еще та ересь Кстати, мне всегда нравился вариант с overflow:auto; для #main. Но дизайнеры бесятся

Victor Ananiev · June 14, 2008

Ну есть вариант с Джава Скрипт, но при выключеной жабе все будет на месте. Вот проблема то...

Sign In

Растяжение хедера и футера

Question

Victor Ananiev

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Azadi

Link to comment

Share on other sites

Пятница

Link to comment

Share on other sites

Victor Ananiev

Link to comment

Share on other sites

Azadi

Link to comment

Share on other sites

Victor Ananiev

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information