Верстка div-ми. Как быть с подвалом?

kozakmamai · October 5, 2007

Есть такая проблема.

Есть страничка в ней одна колонка (div). Как сделать так чтобы в случае не полной заполнености колонки, низ ее был в самом низу окна браузера, но в случае добавления материала низ опускался ну и соотвественно в браузере появляется вертикальный скрол.

Буду очень презнателен если подскажите или дадите сылки на материал. На каком ресурсе можна посмотреть варианты верстки в одну, две, три колонки, с подвалом и тд.

psywalker · June 4, 2011

хорошо, important и * убрал.
css такой:
body{margin:0;padding:0;}
html,body{height:100%;}
.container{min-height:100%;}
* html .container{height:100%;}
.footer{margin-top:-60px;height:60px;}
этот код для страницы с подвалом, который ведет себя вполне корректно как при переполнении основного содержания, так и при малом его содержимом в указанных мною браузерах. хотелось бы знать, корректен ли он в эксплорере 8 и 9, сам проверить не могу.

Тестовой страницы с примером у меня нет, но по тому участку кода, который я вижу - могу сказать, что всё отлично.

удалец · June 4, 2011

может ли кто проверить нижеследующий код в 8 и 9 эксплорере?

<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/Dtd/xhtml1-transitional.dtd">

<head>

body{margin:0;padding:0;}

html,body{height:100%;}

.container{min-height:100%;}

* html .container{height:100%;}

.footer{margin-top:-60px;height:60px;}

</style>

</head>

<div style="background-color:#88ff88;padding-bottom:60px;">содержание</div>

</div>

<div class="footer" style="background-color:lime;">подвальчик</div>

</body>

</html>

psywalker · June 4, 2011

1. На будущее код вставляй в спец. теги для этого.

2. Не надо ничего проверять, итак вижу, что всё отлично.

Markus · June 6, 2011

Друзья, подскажите! В общем нужно чтобы высота слоя content была резиновой, а footer смещался вниз. Сейчас получается так, что если в контейнере content много инфы, то образуется "захлест" на footer. Footer смещается вниз по высоте Right-panel (а нужно по высоте content+news+temp). Как быть?

HTML

<html>
<head>
<LINK rel="stylesheet" media="screen" type="text/css" title="Style" href="style.css" />

</head>
<body>
<div id="content">
	<div class="temp"></div>

	<div id="welcome">
		<p>content1</p>
		<p>content2</p>
		<p>text1</p>
		<p>text2</p>
	</div>

	<div id="news">
		<p>news</p>
		<p>news</p>
		<p>news</p>
	</div>

    <div id="right-panel">
	<p>right</p>
	<p>right</p>
	<p>right</p>

    </div>

	<div class="temp"></div>
</div>

<!--Подвал-->
<div id="footer">
	<p>footer</p>
	<p>footer</p>
	<p>footer</p>
</div>
</body>
</html>

CSS

div#content {
	margin: auto; 
	width: 1000px;
	background-color: #FDFDFD;
	height: auto;
}

div.temp {height: 30px;}

div#welcome {
	width: 625px;
	margin: 0 0 0 31px;
	border:1px solid #cdcdcd;
	background-color: #f8f8f8;
	float: left;
}

div#news {
	width: 625px;
	height: 100%;
	margin: 0 0 0 31px;
	float: left;
}

div#right-panel {
	margin: 0 0 0 657px;
	border:1px solid #cdcdcd;
	background-color: #f8f8f8;
	width: 315px;
	height: 100px;
}

div#footer {
	background: url('../img/footer-bg.png') repeat-x;
	height: 181px;
	width: 1000px;
	margin: auto;
	border: 1px solid #cdcdcd;
}

Edited June 6, 2011 by Markus

buddah · June 6, 2011

Сверху есть форма "Искать..". Тема обсуждалась раз 50.

Markus · June 7, 2011

Сверху есть форма "Искать..". Тема обсуждалась раз 50.

На форуме впервые. А по какому ключевому слову-то искать? "Местный" сленг, связанный с html, css еще не освоил.

buddah · June 8, 2011

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Сергей Шолохов · October 6, 2011

http://divhack.com/node/27

Предлагаю 100% решение вопроса с футером.

Работает в ie7-9, chrome, safari, firefox, opera.

Использую этот метод как на сайтах визитках, так и на порталах.

Если контента мало - футер на любом разрешении экрана будет внизу браузера.

Если контента будет много - контент корректно отодвинет футер ниже.

samoa · April 5, 2012

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

maa · May 5, 2012

Ребята, вопрос вот в чём:

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

Подозреваю, что выравнивать боковые логотипы можно, задав отступ от верха в 30%. А вот сделать резиновый футер - это впервые слышу. Подскажите, пожалуйста.

borus · June 6, 2012

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

применил метод Раяна, но чего-то не учёл:

1. Если смотреть главную страницу , то рамка не охватывает своё содержимое.

2. Если смотреть другую страницу, то нижняя граница рамки не видно без прокрутки вниз

Прошу помочь с этими задачами разобраться

Edited June 6, 2012 by borus

Николя223 · July 9, 2012

Ребят, я только недавно верстать начал (знакомые просят сайт - сделаю конечно же), и пришёл к выводу что таблицами верстать гораздо удобнее.

Но последнее время сколько различных форумов обошёл, и вижу что DIVами верстать оказывается "Модно", и заказчики зачастую требуют именно такую структуру...

Можете объяснить почему, всё дело в Моде?? или есть плюсы о которых я не знаю

antmike · July 27, 2012

Ребята, вопрос вот в чём:
задача: прибить футер книзу(с этим проблем нет), в центре футера меню, а по бокам логотипы. нужно сделать, чтобы футер тянулся, в случае добавления пунктов меню, а боковые логотипы выравнивались по центру высоты футера.
Подозреваю, что выравнивать боковые логотипы можно, задав отступ от верха в 30%. А вот сделать резиновый футер - это впервые слышу. Подскажите, пожалуйста.

Уже раз встречал такой вопрос - "резиновый футер" - ну назовите его не футер - нижний header

если немного отойти от стандартов и стереотипов, то это всего лишь навсего обычный DIV )))

Апельсинова · August 3, 2012

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

wildhind · August 3, 2012

можно.

Скриптом.

SelenIT · August 20, 2012

Или так (если забить на IE6-7, что давно пора).

ShadowScale · September 10, 2012

В опере самый обычный метод приклейки футера дейсвтительно косячит (1ое сообщение на 2ой странице) - когда меняешь размеры окна он залипает.

есть для этого какой-то хак?

Edited September 10, 2012 by ShadowScale

Tsybin · November 18, 2012

хорошо, important и * убрал.
css такой:
body{margin:0;padding:0;}
html,body{height:100%;}
.container{min-height:100%;}
* html .container{height:100%;}
.footer{margin-top:-60px;height:60px;}
этот код для страницы с подвалом, который ведет себя вполне корректно как при переполнении основного содержания, так и при малом его содержимом в указанных мною браузерах. хотелось бы знать, корректен ли он в эксплорере 8 и 9, сам проверить не могу.

Спасибо, отличный вариант!

bob_24 · January 21, 2013

Или так (если забить на IE6-7, что давно пора).

Может, что со мной не так, но если на такой странице подключаю библиотеку jQuery, то в Chrome таблица схлопывается по вертикали...

А так способ отличный, да.

howtomake · February 25, 2013

Вот отличная статья Dimox'a на тему прижатого к низу футера

работает в ие7+

Для трех колонок одинаковых по высоте, решение есть еще с 2006 года %)

http://alistapart.com/article/holygrail

Cocaine · January 29, 2014

height: 100;

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

А так же если ещё его не полностью фиксировать

max-height: 100;min-height: 100;

wh1tegray · June 4, 2014

всегда использую такой вариант:

<html>  <body>  <style>html,body {	margin: 0;	height: 100%;}#content {	min-height: 100%;	height: auto !important;	height: 100%;	margin: 0 auto -200px;}#pusher,#footer {	height: 200px;}#footer {	background: #ededed;}</style>  <div id="content">    	content	<div id="pusher"></div>  </div>    <div id="footer">footer</div>    </body>  </html>

на моей памяти везде работал...

Максим Саенко · June 15, 2014

ПАМАГИТЕ... или я себя не того... всю ночь сидел бился... почитал статью (где она только раньше была?!??) попробовал — получилось... решил переделать... и пошла котовасия!!! То райт на лефт заезжает, то футер куда-то уходит... короче долго бился, но победил... щас, вроде, всё нормально... но... появился какой-то отступ сверху... пикс. так на 15-20 (см. рис.).

Привожу коды страницы и css-стилей

Страница:

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Бебебе</title><link href="/css/style.css" rel="stylesheet" type="text/css"></head><body><div id="page">	<div id="header"><h1>Слоган или имя сайта</h1></div>	<div id="left">		Здесь потом что-то напишем	</div>	<div id="right">	Это основная колонка сайта	</div>	<div id="footer">© Подвальчик сайта</div></div></body></html>

Таблица стилей:

html {	margin:0;	padding:0}body {	margin:0;	padding:0;	font-family: verdana;	font-size: 11px;	color:#000000;	background-color:#999999;	height:100%;}h1 {	font-size:18px;	color:#DCDCDC;}a {	text-decoration:none;}/*Page ID*/#page {	width:1000px;	margin:0 auto;	background: #ffffff;}#header {	border-radius: 5px 5px 0 0;	width: 950px;	background:#FFF5EE;	height:150px;	line-height:150px;	margin:10px 25px 0 25px;}#left {	width:250px;	float:left;	margin-left:25px;	background:#E6E6FA;	padding:5px 0;}#right {	width:700px;	margin-left:275px;	background:#FFF0F5;	padding:5px 0;}#footer {	width:950px;	clear:both;	height:50px;	line-height:50px;	background:#FFE4E1;	margin:0 25px 10px 25px;}

И вот что получилось:

Светлана Г. · June 17, 2014

line-height:150px; дает этот отступ.

Launder · August 29, 2015

всегда использую такой вариант:
...#content {	min-height: 100%;	height: auto !important;	height: 100%;	margin: 0 auto -200px;}#pusher,#footer {	height: 200px;}...  <div id="content">    	content	<div id="pusher"></div>  </div>    <div id="footer">footer</div>    </body>  </html>  
на моей памяти везде работал...

1. Вот эта связка не вполне понятна:

	height: auto !important;	height: 100%;

Объясните, пожалуйста, как это должно работать.

2. На фига нужен pusher, когда он начинает играть роль и в чём она?

Спасибо!

Sign In

Верстка div-ми. Как быть с подвалом?

Question

Link to comment

Share on other sites

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

Popular Posts

SelenIT

SelenIT

53 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

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