Как правильно сделать отступ снизу под футером

pav8909 · April 14, 2011

Имеется внешний div, у которого фоновый рисунок - штриховка. этот div имеет поля слева и справа по 20 пикселей, а также футер отступает снизу то края страницы на 20 пикселей. у div с контентом белый фон. Естественно, минимальная высота должна быть 100%, и футер внизу.

По-другому задачу можно сформулировать так: есть внешний div, с минимальной высотой 100% и штриховкой на фоне, и внутренний, который имеет высоту на 20 пикселей меньше внешнего, соответсятвенно футер прибит к низу уже во внутреннем диве.

Что-то подобное можно увидеть на toolsbrk.ru, но там с полосой прокрутки(т.е. внутреннему диву задана высота 100% + паддинг снизу)

Очень интересно было бы увидеть решение этой задачки.

Int · April 14, 2011

Кто-нибудь понял, что он написал?

Описано взаиморасположение двух дивов, а задача в чём?

pav8909 · April 14, 2011

Кто-нибудь понял, что он написал?
Описано взаиморасположение двух дивов, а задача в чём?

Если не сложно - зайдите на toolsbrk.ru, там нечто подобное, но сделано очень криво. Задача - чтобы снизу футера был отступ со штриховкой.

Извинете, если непонятно изъясняюсь.

Edited April 14, 2011 by pav8909

pav8909 · April 14, 2011

Пришел к мысли, что это сделать без javascript невозможно...

psywalker · April 14, 2011

Пришел к мысли, что это сделать без javascript невозможно...

Почему? Можно ж обычный футер внизу, НО внутри у него блок отодвинуть абсолютом наверх и всё.

PanSoul · April 15, 2011

Почему? Можно ж обычный футер внизу, НО внутри у него блок отодвинуть абсолютом наверх и всё.

а можно и не внутри, если с position:relative (:

pav8909 · April 15, 2011

А как тогда растянуть блок с белым фоном?

psywalker · April 15, 2011

А как тогда растянуть блок с белым фоном?

Ну например отдельным слоем и top:0;bottom: на абсолюте.

Searcher · April 15, 2011

Накидал на скорую руку, может пойдет... Проверял только в FF.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>ABRAKADABRA</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	html,body { height: 100%; background: gray; color: #fff;}

	#wrap { 
		min-height: 100%;
		margin: -40px 40px 0 40px;
		background-color: blue; 
		position: relative;

	}
	* html #wrap { height: 100%;}
		#head { height: 120px; padding-top:40px; background: #000;}
		#basis { padding-bottom: 70px; overflow: hidden; }
		#foot { 
			height: 70px;
			background: red;
			position: relative;
			z-index: 1;
			margin: -70px 40px 0 40px;
		}
		#bottom { height: 40px; }

</style>
</head>

<body>
	<div id="wrap">
		<div id="head">HEADER</div>
		<div id="basis">Center<br/>
				Center<br/>
				Center<br/>
				Center<br/>
				Center<br/>
				Center<br/>
				Center<br/>
				Center<br/>
				Center<br/>
				Center<br/>
				Center<br/>
				Center<br/>
				Center<br/>
		</div>
	</div>
	<div id="foot">FOOTER</div>
	<div id="bottom"></div>
</body>
</html>

psywalker · April 15, 2011

Searcher

Отличный вариант дружище, и пашет везде, проверено!

pav8909 · April 15, 2011

спасибо за решение! Очень вам благодарен!

Searcher · April 15, 2011

Замечательно!

Sign In

Как правильно сделать отступ снизу под футером

Question

Link to comment

Share on other sites

11 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

Join the conversation

Обсуждения

Important Information