footer внизу, проблема с Mozilla

uNkind · September 16, 2011

Добрый день.

Ситуация такая: нужно сделать, чтобы футер был всегда внизу страницы. При этом фон контента всегда должен заполнять всю область страницы до футера.

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

Все работает нормально в браузерах IE6+, Opera и Google Chrome. Не работает в Мозилле - фон контента, если его мало, не заполняет всю область страницы до футера. Уже не знаю, что делать. Подскажите, в чем может быть проблема? Заранее спасибо за любую помощь.

Исходный код:

(основной блок main, в нем лежат блоки контент и футер. В блоке контент добавляется пустой блок empty, равный высоте футера, чтобы содержимое контента не налезало на футер)

<html>

<head>

* {padding: 0; margin: 0}

body, html {height: 100%}

div.main, div.content {

height: auto !important;

height: 100%;

min-height: 100%;

position: relative

}

div.main {width: 100%; background-color: #ccc}

div.content {width: 50%; background-color: #cf0; text-align: center}

div.footer {

position: absolute;

bottom: 0;

width: 100%;

height: 150px;

background-color: #0cf

}

div.empty {height: 150px}

</style>

</head>

<body>

<a href="/test/1.html">Мало контента</a>

<a href="/test/2.html">Много контента</a>

Мало контента. Футер должен быть внизу, а фон контента должен заполнять всю страницу.

</div>

</div>

</body>

</html>

Что-то не смог придумать как сделать код более читабельным, прошу прощения.

Edited September 16, 2011 by uNkind

Myuzik · September 16, 2011

У Вас сейчас в исходном коде записан стиль:

div.main, div.content {
height: auto !important;
height: 100%;
min-height: 100%;
position: relative
}

Но в примере который вы выложили стиль такой:

div.main, div.content {
height: auto !important;
min-height: 100%;
position: relative
}

Найдите разницу и будет вам счастье!

P.S.

position: relative

у Вас не закрыт...

Edited September 16, 2011 by Myuzik

uNkind · September 16, 2011

У Вас сейчас в исходном коде записан стиль:
div.main, div.content {
height: auto !important;
height: 100%;
min-height: 100%;
position: relative
}
Но в примере который вы выложили стиль такой:
div.main, div.content {
height: auto !important;
min-height: 100%;
position: relative
}
Найдите разницу и будет вам счастье!
P.S.
position: relative
у Вас не закрыт...

Проверил еще раз выложенный пример - свойство "height: 100%;" там присутствует. То ли я не так понял, что Вы имеете в виду, то ли Вы ошиблись. Не могли бы Вы пояснить поподробнее?

Насчет "position: relative" — последнее свойство не обязательно закрывать точкой с запятой, по идее это не ошибка.

Bonzash · September 16, 2011

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

Myuzik · September 16, 2011

откройте ваш пример фаербагом (например) и посмотрите. Свойство height:100% не активно. Возможно проблема в том, что в коде оно должно стоять после height: auto. Прислал бы скриншот, но пока с мобильной платформы сижу.

Justnewone · September 16, 2011

Нельзя ни в одном браузере кроме оперы заставить блок считать высоту в процентах от своего родителя, если последнему указано не height, а min-height.

В вашем случае, надо блоку .main назначать бекграунд, который должен быть "во всю высоту экрана", а футером этот бекграунд сверху чем-то закрашивать. Иное решение, боюсь, только через JS: определяем высоту, отнимаем от нее высоту футера, назначаем.

uNkind · September 16, 2011

Всем большое спасибо за ответы, вроде разобрался, как сделать, все работает.

Sign In

footer внизу, проблема с Mozilla

Question

uNkind

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Myuzik

Link to comment

Share on other sites

uNkind

Link to comment

Share on other sites

Bonzash

Link to comment

Share on other sites

Myuzik

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

uNkind

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information