Прижать футер

seemax · June 25, 2012

http://pomidor.com.ua/seemax/Imageneer/HTML/Imageneer.html

Все вроде бы по правилам:

Вышележащ блок min-height:100% и margun-top:-высота футера.

А футер не прижат, т как .container не занимает 100% высоты.

В чем проблема может быть?

Sensei · June 25, 2012

Что бы высчитать у какого-либо элемента min-height: 100%, нужно задать стопроцентную высоту всем вышестоящим по иерархии элементам, вплоть до html

seemax · June 25, 2012

Всем родителям прижимателя футера, до самого html задал min-height:100% это не сработало.

Sensei · June 25, 2012

Потому что надо всем родителям не мин-хайс, а просто хайс задавать.

RK-007 · July 6, 2012

Хочу поделиться своим решением прижатия футера к низу. Ничего нового не открою, весь трюк состоит в margin с минусовым значением. Но реализация вся своя, такой пока не встречал.

К примеру, у нас есть 2 блока контента(слева и справа) и футер.

html-код страницы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Тестовая страница</title>
<link rel="stylesheet" href="./style.css" />
</head>  
<body>
<div id="main_block">

<div id="header_left"><div class="main_conteiner">Пустая колонка слева</div></div>
<div id="header_right"><div class="main_conteiner">Пустая колонка справа</div></div>

<div id="footer">Копирайты и пр.</div>
</div>
</body>
</html>

и css

* {
margin: 0px;
padding: 0px; }

html, body {
margin: 0px;
padding: 0px;
width: 100%;
min-width: 200px;
height: 100%;
min-height: 200px;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: 12px; }

div#main_block {
overflow: auto;
width: 100%;
height: 100%; }

div#header_left {
margin-top: -90px;
float: left;
width: 20%;
min-width: 100px;
height: 100%;
border: 1px solid #ffffff;
background: #abcdef; }

div#header_right {
margin-top: -90px;
height: 100%;
border: 1px solid #ffffff; }

div.main_conteiner {
margin-top: 90px;
overflow: auto; }

div#footer {
clear: both;
overflow: auto;
height: 88px;
background-color: #f2f2f2; }

Буду рад любой конструктивной критике.

lexxcode · July 6, 2012

RK-007, У вас возникает слишком много зависимостей. Плюс если нужно будет сверху вставить целый по ширине блок, хедер например, то уже ничего не получится. Так, что вариант откровенно не пригодный.

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

А в вашем случае выходит, что проблема нижней части страницы решается в самом ее верху, не логично.

Sign In

Прижать футер

Question

seemax

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Sensei

Link to comment

Share on other sites

seemax

Link to comment

Share on other sites

Sensei

Link to comment

Share on other sites

RK-007

Link to comment

Share on other sites

lexxcode

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information