Растягивание блока

DRiVER · June 10, 2009

Требуется растянуть блок notes на всю высоту блока blog

Перепробовал всё что смог, но проблему так решить и не удалось (

<html>
<head>
<style type="text/css">
div.container {
	width:1000px;
	margin:0 auto;
}
div.block_content {
	background:#030;
}
div.blog {
	width:968px;
	margin:0 15px;
	overflow:hidden;
	background-color:#0C9;
}
div.notes {
	width:740px;
	float:left;
	background-color:#6CF;
}
div.post {
	background-color:#FC9;
}
div.sidebar {
	width:211px;
	float:right;
	background-color:#99C;
}
</style>
</head>

<body>
<div class="container">
	<div class="block_content">
		<div class="blog">
			<div class="notes">
				<div class="post">
					<p>post</p>
		   	 		<p>post</p>
		   	 		<p>post</p>
		   	 		<p>post</p>
		   	 		<p>post</p>
				</div>
				<p>notes</p>
			</div>
				<div class="sidebar">
					<p>sidebar</p>
		   	 		<p>sidebar</p>
		   	 		<p>sidebar</p>
		   	 		<p>sidebar</p>
		   	 		<p>sidebar</p>
					<p>sidebar</p>
		   	 		<p>sidebar</p>
		   	 		<p>sidebar</p>
		   	 		<p>sidebar</p>
		   	 		<p>sidebar</p>
					<p>sidebar</p>
		   	 		<p>sidebar</p>
		   	 		<p>sidebar</p>
		   	 		<p>sidebar</p>
		   	 		<p>sidebar</p>
				</div>
		</div>
	</div>
</div>
</body>
</html>

Searcher · June 10, 2009

Естественно просто указав высоту в 100% вы ничего не добъетесь, поскольку 100% от автоматической высоты родителя - не вычисляемо. Либо надо указывать высоту родителя, либо использовать абсолютное позиционирование:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div.container {
	width:1000px;
	margin:0 auto;
}
div.block_content {
	background:#030;
}
div.blog {
	width:968px;
	margin:0 15px;
	overflow:hidden;
	background-color:#0C9;
	position: relative;
}
div.notes {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width:740px;
	*height: expression(parentNode.offsetHeight+'px');
	background-color:#6CF;
}
div.post {
	background-color:#FC9;
}
div.sidebar {
	width:211px;
	float:right;
	background-color:#99C;
}
</style>
</head>

<body>
<div class="container">
	<div class="block_content">
		<div class="blog">
			<div class="notes">
				<div class="post">
					<p>post</p>
						<p>post</p>
						<p>post</p>
						<p>post</p>
						<p>post</p>
				</div>
				<p>notes</p>
			</div>
				<div class="sidebar">
					<p>sidebar</p>
						<p>sidebar</p>
						<p>sidebar</p>
						<p>sidebar</p>
						<p>sidebar</p>
					<p>sidebar</p>
						<p>sidebar</p>
						<p>sidebar</p>
						<p>sidebar</p>
						<p>sidebar</p>
					<p>sidebar</p>
						<p>sidebar</p>
						<p>sidebar</p>
						<p>sidebar</p>
						<p>sidebar</p>
				</div>
		</div>
	</div>
</div>
</body>
</html>

тут для ИЕ6 приходится задавать экспрешн, что не очень гуд... но ИЕ6 и ранние не понимают одновременного указания координат противоположных сторон.

И доктайп обязательно указывайте, а то броузеру не понятно в каких стандартах рендерить.

Searcher · June 10, 2009

Но, тут уже будут другие проблемы: содержимое notes не будет растягивать родителя. Вобщем, если нужна визуализация растягивания блока по высоте, то решайте это фоном родителя или бордерами, а если что-то более сложное, то делайте таблицами.

Sign In

Растягивание блока

Question

DRiVER

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Searcher

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information