Прибить футер к низу страницы, как?

12 3
lazio
На сайте с 05.10.2006
Offline
47
5928

Как вы решаете эту проблему?

Дело в том, что постоянно использовал метод с абсолютным позиционированием и указанием html,body {height:100%} , но сегодня вылезла ошибка,к элементу body нельзя повесить фоновое изображение выравненное с низу, при увеличении контента и появлении скроллинга, фон остается на том же месте(( С методом отрицательного верхнего отступа у футера тажа проблема.

Вот минимальный код (bg.gif - полоска 1х300 пикс.):


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<style type="text/css" media="screen">
* {
margin:0;
padding:0;
}
html,body {
height:100%;
}
body {
background:red url(bg.gif) bottom repeat-x;
}
#content {
background:#EEE;
width:600px;
min-height:100%;
position:relative;
}
* html #content {
height:100%;
}
#footer {
background:#CCC;
position:absolute;
bottom:0;
left:0;
width:600px;
}
</style>
</head>

<body>
<div id="content">
<p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p> <p>контент</p>

<div id="footer">
футер
</div>
</div>
</body>
</html>

Спасибо!

COMFI - Начни Зарабатывать! (http://affiliate.comfi.ru/a2/466735/Program-Overview)
Сергей Владимирович
На сайте с 24.08.2008
Offline
121
#1

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

<html>

.........

</div>

<div id="footer"></div>

</body>

</html>

и цсс

#footer {

position: relative;

background: #333;

width: 960px;

height: 50px;

color: #ccc;

font-size: .9em;

margin: -50px auto 0;

}

Массовый постинг на AVITO.RU | IRR.RU (http://job.consultant-plus.com/)
lazio
На сайте с 05.10.2006
Offline
47
#2

тек не покатит(( футер то прибивается, но проблема совсем не в этом! Еще раз повторю, проблема в том, что фон для body не тянется по вертикали, т.к. для body указана высота 100%.

FeoOne
На сайте с 27.12.2008
Offline
32
#3

background:red url(bg.gif) repeat-x bottom left;

Руслан Исмаилов
На сайте с 30.03.2007
Offline
198
#4

фон тянуть по вертикали тянуть нужно через repeat-y

дальше вникать не стал пьяный..........

lazio
На сайте с 05.10.2006
Offline
47
#5

ребята, читайте плиз топик! Специально привел html, описал проблему, про всякие repeat-x-y и так все знают, дело не в этом. Не пишите лижбы написать, это никому не нужно...

kopusha
На сайте с 04.11.2008
Offline
175
#6

это .css

* {

margin: 0;
padding: 0;
border: 0;
}

html, body {
width: 100%;
height: 100%;
}

* html #container {
height: 100%;
}

body {
background: #fff;
color: #333;
}

#container {
position: relative;
width: 960px;
margin: 0 auto;
min-height: 100%;
}

.clearfloat {
clear: both;
}

.empty {
height: 50px;
}

#footer {
position: relative;
background: #333;
width: 960px;
height: 50px;
color: #ccc;
font-size: .9em;
margin: -50px auto 0;
}

это .html

<html>

<head></head>
<body>
<div id="container">
<div id="header"></div>
<div id="leftside"></div>
<div id="rightside"></div>
<div class="clearfloat"></div>
<div class="empty"></div>
</div>
<div id="footer"></div>
</body>
</html>

вы перед футером с помощью empty "резервируете" ему место заданной высоты, и при этом футер не налезет на контент. старайтесь взять кодцеликом - там min-height: 100%; в container = это исключительно для ИЕ хак к примеру.

FeoOne
На сайте с 27.12.2008
Offline
32
#7
lazio:
Специально привел html, описал проблему, про всякие repeat-x-y и так все знают, дело не в этом.

но видимо не все знают, в каком порядке repeat-x-y должны идти

F
На сайте с 22.12.2005
Offline
48
#8

lazio, а если background с этой картинкой прописать не у body,а у html?

Наслаждение жизнью - это искусство
lazio
На сайте с 05.10.2006
Offline
47
#9

Flame, не катит. таже херь.

kopusha, спасибо но тоже не помогло(( У вас опять же для html,body указана высота 100%, это видимая часть экрана и она не тянется, поэтому фон (если на странице много контента и появляется правый скролл) не выравнивается по нижней границе.

kopusha
На сайте с 04.11.2008
Offline
175
#10

ага, у вас фон над футером сразу и вверх не тянется? и при длинной стр он прибитый к низу 100% видимого экрана и при скроле белое пятно под ним?

или я чёт не понимаю)

12 3

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий