Как div блок растянуть по высоте между двумя другими?

Elmirill · September 19, 2010

Здравствуйте!

Есть два див блока: хедер и футер.

Между ними блок контент.

Футер прижат к низу окна браузера, и из-за этого между блоками контент и футер образовалась пустота.

Вопрос: как блок контент растянуть между блоками хедер и футер, чтобы между ними не было зазоров?

Цель данной манипулации: сделать внутри дивов бэкграунд чтобы образовался цельный лист.

Спасибо.

Код:

<body>

<div id="wrapper">

	<div id="header">
	</div><!-- #header-->

			<div id="content">
			</div><!-- #content-->

</div><!-- #wrapper -->

<div id="footer">
</div><!-- #footer -->

</body>

css:

* {
	margin: 0;
	padding: 0;
}
html {
	height: 100%;
}
body {
	width: 100%;
	height: 100%;
}
#wrapper {
	width: 980px;
	margin: 0 auto;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}
#header {
	height: 190px;
}
#content {
	padding: 0 270px 0 0;
	margin: 0 auto;
	height: 100%;
}
#footer {
	width: 980px;
	margin: -32px auto 0;
	height: 32px;
}

npofopr · September 19, 2010

примерно так хотите что ли?

Elmirill · September 20, 2010

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

psywalker · September 20, 2010

Наводка

position: absolute; top: 100px; left: 0; right: 0; bottom: 100px;

Elmirill · September 20, 2010

Спасибо, вопрос решен

Great Rash · September 21, 2010

Хе-хе... подозреваю что ТС сюда еще вернется с вопросом про фикс для ИЕ

danik.html · September 22, 2010

Хе-хе... подозреваю что ТС сюда еще вернется с вопросом про фикс для ИЕ

я прочитав тоже так подумал))

но вот только о подобном фиксе не слышал. поделишся?

Great Rash · September 22, 2010

А че там делиться - expression пишем и всего делов.

Sign In

Как div блок растянуть по высоте между двумя другими?

Question

Elmirill

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

npofopr

Link to comment

Share on other sites

Elmirill

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Elmirill

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

danik.html

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information