Вопрос по высоте слоев

sock4proxy · July 21, 2008

Добрый день.

есть вот такая структура слоев:

html:

<div id="all">
		<div id="header">
			header
		</div>
		<div id="content">
			content
		</div>
</div>

При условии, что div header фиксированной высоты 300px, как сделать, чтобы div content занял всю оставшуюся высоту? те 100% - 300px...

заранее спасибо

_EAX_ · July 21, 2008

Могу предложить, [div id=content] вложить в еще один [div class=content]. Первый ты растягиваешь на весь экран (position: absolute) и оформляешь как тебе надо, а второму просто придаешь margin-top: 300px и пишешь в нем буквы Предполагается, что верхняя часть растянутого дива спрячется под хедером.

Вот пример:

<html>
<head>
<title>HEAD</title>
<style>
body {margin: 0; padding: 0;}
#global {
	background-color: #DDDDDD;
	border: 0px solid #998877;
	height: 100%;
	width: 100%;
}

#head {
	height: 200px;
	border: 1px solid white;
	background-color: #333333;
	color: white;
}

.content {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	background-color: #green;
	border: 2px solid red;
	color: white;
}

#content {
	margin-top: 200px;
	background-color: darkred;
}
</style>
</head>
<body>

<div id=global>
	<div id=head>
	HEAD >>>
	</div>

	<div class=content>
		<div id=content>
		CONTENT HERE >>>
		</div>
	</div>
</div>

</body>

</html>

ЗЫ - а помню можно было как-то по другому еще сделать...

Edited August 21, 2008 by _EAX_

sock4proxy · July 21, 2008

спасибо...

вариант...

upd.

нет, пардон, не совсем то...

мне нужно, чтобы

был до низа страницы, тк там фоном картинка идет...

_EAX_ · July 21, 2008

В моем примере, фон применяем к class'у. А в диве 'id=content' там только текст и отступы. Я так имел в виду.

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

Sign In

Вопрос по высоте слоев

Question

sock4proxy

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

_EAX_

Link to comment

Share on other sites

sock4proxy

Link to comment

Share on other sites

_EAX_

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information