Как сделать так, чтобы слой-футер был всегда был внизу страницы

Качан Капусты · February 9, 2008

Всем привет! Такая возникла проблемка. Есть три блока: хидер, тело, футер:

__________________

| хидер |

|__________________|

| |

| боди |

|__________________|

| футер |

|__________________|

Надо чтобы футер был всегда в самом низу страницы, вне зависимости от того, сколько контента в боди. Эту ссылку, изучил, но решение предложенное там мне не помогло.

У меня два файла: Index.html и main.css вот их код:

index.html:

<html>
	<head>
		<title>сайт.ру</title>
		<link rel=stylesheet href=main.css type=text/css>
	</head>
	<body>
		<!-- Контейнер -->	
		<div style='text-align: center; border: 0; width: 800px; height: 100%;position: relative; left:50%; margin-left:-400px; background-color: #fff'>	
			<!-- Шапка -->	
			<div style='text-align: center; border: 0; width: 800px; height: 86px; background-image: url(images/topbg.jpg)'>	

			</div>	
			<!-- //Шапка -->	

			<!-- Тело -->	
			<div style='text-align: center; border: 0; width: 800px; background-color: #fff; overflow: auto;'>	
				Контент
			</div>	
			<!-- //Тело -->	

			<!-- Футер -->	
			<div style='position: absolute; overflow: auto; left: 0px; bottom: 0px;	border: 0; width: 800px; height: 50px; background-color: #ccc; margin: 0 auto;'>	

			</div>	
			<!-- //Футер -->	

		</div>	
		<!-- //Контейнер -->	
	</body>
</html>

main.css:

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

html {
  height: 100%;
}

body{
margin:0 auto;
	padding: 0;
	border:0;
	color:#333;
	background:#666;
	font: 62.5% Arial,Sans-Serif
}

Так вот, этот код работает правильно в ИЕ и Опере. То есть если контента меньше чем на всю страницу, то футер располагается внизу страницы, скроллбаров нет. Если контента больше чем на 1 экран, то появляются скроллбары и футер располагается в самом низу под контентом.

В ФФ2 этот пример работает не корректно: если контента меньше чем на всю страницу, то футер выводится корректно, скроллбаров нет. Если контента больше чем на всю страницу, то футер отображается внизу окна, но если прокрутить окно вниз, то он (футер) остается на месте и перекрывает часть контента. То есть он располагается не под контентом, а пересекает его, оставаясь на месте при скролле окна.

Как сделать так, чтобы и в ФФ футер был всегда под контетнтом?

Emm · February 9, 2008

G

Качан Капусты · February 9, 2008

Спасибо. Оказывается в мой код достаточно было добавить:

<!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="en">

Dimitry Wolotko · February 9, 2008

Emm, замечание тебе. Читай правила раздела.

Sign In

Как сделать так, чтобы слой-футер был всегда был внизу страницы

Question

Качан Капусты

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Emm

Link to comment

Share on other sites

Качан Капусты

Link to comment

Share on other sites

Dimitry Wolotko

Link to comment

Share on other sites

Обсуждения

Forums

Important Information