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

chocolate_moles · April 7, 2012

Помещаю все содержимое страницы во wrapper(растягиваю на 100% по высоте), footer делаю с отрицательным отступом, все ОК.

Но как сделать отступ в 20px сверху?

p.s. ладно черт с ним с футером, как просто растянуть блок по высоте окна браузера и сделать фиксированный отступ сверху?

Edited April 7, 2012 by chocolate_moles

Switch74 · April 7, 2012


<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title></title>
<style>
*{margin:0px;padding:0px;}
html,body{height:100%;background:#ddd;}
	.wrapper{position:relative;margin:0px auto;width:1000px;min-height:100%;}
		.page{position:absolute;margin:0px auto;top:20px;bottom:20px;width:1000px;z-index:1;background:#fff;}
		.content{position:relative;padding:20px 0px;z-index:2;}
		.footer{position:absolute;left:0px;right:0px;bottom:20px;background:#bbb;z-index:3;}
</style>
<head>
</head>
<body>
<div class="wrapper">
	<div class="page"></div>
	<div class="content">
		content
	</div>
	<div class="footer">footer</div>
</div>
</body>
</html>

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

растянуть по высоте 100% отступ будет добавляться к этим 100% и как следствие будет появляться вертикальный скролл

chocolate_moles · April 7, 2012

растянуть по высоте 100% отступ будет добавляться к этим 100% и как следствие будет появляться вертикальный скролл

вот в этом и проблема, которую хотелось бы решить)

Catherine · April 7, 2012

Может, Вам нужно не блок, а его фон растянуть на 100%?

Вот одно из решений, фон на всю высоту страницы, с фиксированными отступами сверху и снизу.

Edited April 7, 2012 by Catherine

chocolate_moles · April 7, 2012

Может, Вам нужно не блок, а его фон растянуть на 100%?

Нет, нужно именно блок.

На странице есть фон, содержание находится в блоке с тенью, и отступом сверху + прижать футер надо.

В принципе можно блок с тенью "нарисовать" фоном страницы...

spdif · April 7, 2012


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin:0px;padding:0px;}
html,body{height:100%;}
body{padding-top:20px;background:#eee;}
.wrapper{min-height:100%;background:#ddd;}
.footer{background:#bbb;}
</style>
</head>
<body>
<div class="wrapper">wrapper</div>
<div class="footer">footer</div>
</body>
</html>

chocolate_moles · April 7, 2012

и получается вертикальная прокрутка

Bismuth · April 8, 2012

и получается вертикальная прокрутка

чтоб не было прокрутки надо к тегу footer, нужна создать отрицательный margin-tор, марджин-тор на отрицательный размер самого footera и все)))

Edited April 8, 2012 by Bismuth

Switch74 · April 8, 2012

и получается вертикальная прокрутка
чтоб не было прокрутки надо к тегу footer, нужна создать отрицательный margin-tор, марджин-тор на отрицательный размер самого footera и все)))

body уже имеет height:100%; + padding-top:20px; и это уже создает вертикальную прокрутку отрицательный margin боюсь не спасет

Edited April 8, 2012 by Switch74

Sign In

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

Question

chocolate_moles

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Switch74

Link to comment

Share on other sites

chocolate_moles

Link to comment

Share on other sites

Catherine

Link to comment

Share on other sites

chocolate_moles

Link to comment

Share on other sites

spdif

Link to comment

Share on other sites

chocolate_moles

Link to comment

Share on other sites

Bismuth

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information