Прижать footer к низу страницы

romanov · March 16, 2012

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


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<body>
<div id="cont">
<div id="otziv">
<div id="main">
<div id="container">
<div id="footer">
</div>
</div>
</body>
</html>

CSS


#cont {
    margin-left: -550px;
    position: relative;
    width: 1100px;
}
#otziv {
    background: url("../imgs/otziv.jpg") no-repeat scroll 0 0 transparent;
    float: left;
    height: 197px;
    left: 10px;
    position: relative;
    top: 152px;
    width: 55px;
}
#main {
    background: url("../imgs/shadow.jpg") repeat-y scroll 0 0 transparent;
    float: left;
    width: 1000px;
}
#container {
    height: auto;
    width: 1000px;
}
#footer {
    background: none repeat scroll 0 0 #F5F3F3;
    clear: both;
    float: left;
    left: 12px;
    list-style-type: none;
    padding-top: 10px;
    position: relative;
    width: 979px;
}

Gaspode · March 16, 2012

<div class="wrapper">
   <div class="preved"></div>
   <div class="content"></div>
</div>
<div class="footer"></div>

html, body { height: 100%;}
.wrapper { min-height: 100%;}
.preved, .content { padding-bottom: 100px;}
.footer { height: 100px;  margin-top: -100px;}

Образно выражаясь.

Edited March 16, 2012 by Gaspode

Searcher · March 16, 2012

Посмотрите, как это делается здесь: http://csstemplater.com/

А вообще, этот вопрос часто поднимался на форуме...

romanov · March 16, 2012

Спасибо за ответ,но при такой разметке как у меня футер не прижимается

Gaspode · March 16, 2012

Было бы странно, если бы прижимался. У вас половина тегов не закрыта.

romanov · March 16, 2012

ВСЕ ТЕГИ ЗАКРЫТЫ Я КОПИРОВАЛ ИЗ FIREBUG'а html структуру

hedgehog · March 16, 2012

ВСЕ ТЕГИ ЗАКРЫТЫ Я КОПИРОВАЛ ИЗ FIREBUG'а html структуру

дебагеры могут сами закрывать теги. смотрите исходник (ctrl+U)

romanov · March 16, 2012

Я смотрел в редакторе все теги реально закрыты

hedgehog · March 16, 2012

Я смотрел в редакторе все теги реально закрыты

Значит, разметка в первом посте не соответствует действительности.

Searcher · March 16, 2012

давайте ссылку, или опишите здесь: http://jsfiddle.net/

romanov · March 16, 2012

Я не знаю такая ссылка будет у вас работать

http://jsfiddle.net/pwLyV/

Searcher · March 16, 2012

Зачем полную страницу то?! Вам проще убрать все лишнее, чем нам разбираться в этой простыне. Оставьте только нужный фрагмент html и css.

romanov · March 16, 2012

Убрал лишнюю разметку

http://jsfiddle.net/pwLyV/1/

Edited March 16, 2012 by romanov

Searcher · March 16, 2012

В вашей разметке нет ничего, чтобы подвал прижимался. Способ Gaspode почему не подошел? Подвал должен иметь постоянную высоту?

romanov · March 16, 2012

Что мне сделать чтобы он прижимался при моей разметке ?

Gaspode · March 16, 2012

Нужно что-то, что будет его прижимать.

Sign In

Прижать footer к низу страницы

Question

Link to comment

Share on other sites

15 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

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