Как прижать футер к низу, после блоков с float.

Ritter · October 10, 2011

Запутался. Сайт двухблочный, с левым float и с правым float в основном блоке с фикс. шириной. Нужно прижать футер к низу. Что делаю:

body, html - height 100%

основной блок - min-height 100%

распорка - height: 80px, clear: both

футер - height: 80px, margin-top:-80px, width:100%

Метод работает, только если левому и правому блоку (которые с float) задать фиксированную высоту, а если убрать, то метод уже не работает.

ctpz · October 10, 2011

position:absolute; bottom:0; left:0;

Ritter · October 10, 2011

On 10/10/2011 at 10:55 AM, ctpz said:
position:absolute; bottom:0; left:0;

Не подходит, после прокрутки страницы, футер поднимается.

bot87 · October 10, 2011

врятли .... но может для родака overflow:hidden;???

Edited October 10, 2011 by bot87

hedgehog · October 10, 2011

покажите код, что-ли

Justnewone · October 10, 2011

Почитайте, там витвисто и по всякому. Если после прочтения темы вам уже тут приведут решение от туда, наверное это нехорошо.

Ritter · October 10, 2011

On 10/10/2011 at 12:06 PM, Justnewone said:
Почитайте, там витвисто и по всякому. Если после прочтения темы вам уже тут приведут решение от туда, наверное это нехорошо.

Почитал...

Не один метод не помог. Работает только в том случае, если у блоков с float стоит фиксированная высота...

hedgehog · October 10, 2011

On 10/10/2011 at 1:15 PM, Ritter said:
Не один метод не помог. Работает только в том случае, если у блоков с float стоит фиксированная высота...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>table</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0;}
.main { min-height: 100%; }
.left { float: left; width: 200px; background: blue;}
.right { float: right; width: 200px; background: green;}
.footer { height: 80px; margin-top: -80px; background-color: yellow; }
.clearing { height: 80px; clear: both; }
</style>

</head>

<body>

<div class="main">
<div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut mi lacus. Pellentesque et dolor vitae velit commodo venenatis sit amet in elit. Ut a lacus a turpis venenatis dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras scelerisque ultrices rutrum.</div>
<div class="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut mi lacus. Pellentesque et dolor vitae velit commodo venenatis sit amet in elit. Ut a lacus a turpis venenatis dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras scelerisque ultrices rutrum.</div>
<div class="clearing"></div>
</div>

<div class="footer"></div>
</body>

</html>

Нечто очень на скорую руку с флоатами без заданной высоты (.clearing можно заменить на "overflow: hidden; padding-bottom: 80px;" у родителя). У всех получается, а у Вас - нет. Значит, что-то делаете неправильно. А что - покажет листинг кода и название браузера, в котором смотрите. Впрочем, у меня тоже может быть неправильно, т.к. я и сам новичок

Ritter · October 10, 2011

Мда... Я виноват, в css, в начале вместо html, стояло hmtl.

То что я изначально сделал, заработало.

Извиняюсь. Пойду отдыхать.

hedgehog · October 10, 2011

On 10/10/2011 at 2:33 PM, Ritter said:
Мда... Я виноват, в css, в начале вместо html, стояло hmtl.
То что я изначально сделал, заработало.
Извиняюсь. Пойду отдыхать.

Пользуйтесь редактором с подсветкой синтаксиса и валидатором

DImas95 · October 10, 2011

Попробуйте clear: both; для подвала

Sign In

Как прижать футер к низу, после блоков с float.

Question

Link to comment

Share on other sites

10 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

Join the conversation

Обсуждения

Important Information