резиновый div

OverSet · 15.07.2011, 07:14

Всем привет!

Возникла следующая задача:

Есть два блока. Один сразу под другим. Верхний блок имеет фиксированную высоту, нижний -- мин. высоту, которая будет в дальнейшем возрастать. При заполнении верхнего блока контентом в его пределах высота нижнего не меняется (before.png). Но при переполнении верхнего контент продолжает ползти вниз, на нижний блок. Далее, если контенту нет места в нижнем диве, происходит соответственно увеличение его высоты, т.е. высота нижнего подстраивается под оставшийся контент (after.png).
Детали в виде рисунков во вложении. Заранее благодарен!

vladendark · 15.07.2011, 08:58

для нижнего блока попробуйте свойство {clear:both}

√BlackCat · 15.07.2011, 09:20

нижний блок я так понимаю Вас вообще не интересует )
что бы верхний не ставал больше, в стиль допишите ему

Код:

overflow:auto;

но это будет скролинг уже. можно и без скролинга но контент будет обрезатся, а это не красиво.

Для чего Вам нужен верхний блок фиксированым ? Может быть попробуем найти Вам альтернативное решение проблемы)

vladendark · 15.07.2011, 09:33

Решений масса. но верное я подскажу только после того, как увижу код

√BlackCat · 15.07.2011, 09:38

Цитата:

Сообщение от vladendark

Решений масса. но верное я подскажу только после того, как увижу код

Чую дух сопернечества

хорошее качество) даже спасибку жмякну

уважаю такое качество в людях)

OverSet · 15.07.2011, 12:19

Хорошо, будет вам код)

Привожу в пример образец, чтобы было понятнее. Но данная задача возникла при верстке графического дизайна. Т.е. есть готовый макет, нарезана графика. Думаю, макет нет необходимости приводить. Блоки header, left, content (желтый) и footer имеют фиксированный размер, т.к. используются в их фонах картинки. Но нужно сделать так, чтобы страница растягивалась, если контент будет большим, благодаря сиреневому блоку. В нем повторяющаяся картинка (repeat-y), в зависимости от высоты блока, которая не повлияет на эстетичность всего дизайна страницы. То есть растягивается как бы "серединка" страницы.

Меняет высоту лишь сиреневый блок, в зависимости от того, будет ли его переполнение, но имеется всегда (с минимальной высотой) сразу за блоком left.

Вот примеры правильного и неправильного взаимодействия блоков.
В правильном примере (right_overflow.png) все работает как положено, когда возникает переполнение. В этом случае сиреневый блок забирает оставшуюся часть контента.
В неправильном (wrong.png) футер привязан к желтому блоку и тянется за ним, пока контент не уместится в желтом, а сиреневый блок пропадает. Необходим результат как на рис. right_normal.png, в случае умещения контента.

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

Код:

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>тестирование колонки</title>
	<style type="text/css">
		body{
			margin:10px auto;
			width:300px;
		}
		#header{
			height:70px;
			background:#cfc;
		}
		#left{
			width:50px;
			height:100px;
			background:#ccf;
		}
		#content{
			position:relative;
			top:-100px;
			width:300px;
			min-height:120px;
			background:#ffa;
			z-index:-1;
		}
		#middle{
			position:relative;
			top:100px;
			width:300px;
			min-height:20px;
			background:#faf;
		}
		#footer{
			width:100%;
			height:70px;
			background:#0ab;
		}
		#control{
			width:250px;
			position:relative;
			top:-100px;
			left:50px;
			margin-bottom:-100px;
		}
	</style>
</head>
<body>
	<div id="header">header</div>
	<div id="left">left</div>
	<div id="content">
		<div id="middle">
			<div id="control">text<br>text<br>text<br>text<br>text<br>text<br>text<br>text end</div>
			<div id="footer">footer</div>
		</div>
	</div>
</body>
</html>

vladendark · 15.07.2011, 12:40

не стал разгребать ваш ужас... пардон.

Код HTML:

<!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=utf-8" />
	<title></title>
	
	
	<style type="text/css">
	#wrapper {
	width: 1000px;
	margin: 0 auto;
}


#header {
	height: 70px;
	background: #FFE680;
}


#middle {
	border-left: 250px solid #B5E3FF;
	height: 1%;
	position: relative;
}

#container {
	width: 100%;
	float: left;
	overflow: hidden;
	margin-right: -100%;
}
#content {
	padding: 0 20px;
}


#sideleft {
	float: left;
	width: 250px;
	position: relative;
	background: #B5E3FF;
	left: -250px;
}


#top_footer{
height: 100px;
background:#f00;
}
#footer {
	height: 100px;
	background: #BFF08E;
}
	</style>
</head>

<body>

<div id="wrapper">

	<div id="header">
		Header
	</div>

	<div id="middle">

		<div id="container">
			<div id="content">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris orci nisi, sollicitudin blandit cursus et, consequat non ante. Sed sollicitudin, lectus eu tincidunt sagittis, massa neque viverra nibh, id sagittis nisl mi in arcu. Pellentesque sapien erat, mollis a dictum sed, bibendum lobortis libero. Mauris id sapien a purus condimentum consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur luctus lacus at est tempus sed porttitor massa fermentum. Cras aliquam, leo dictum porta rhoncus, tortor sapien ullamcorper turpis, eget ullamcorper augue nulla sed arcu. Ut ullamcorper placerat semper. Suspendisse et sapien nec ante ultrices pulvinar. Sed tortor nisi, rutrum eu eleifend nec, auctor sit amet sapien. Vestibulum elementum purus eu nisl consequat et ornare felis posuere. Donec dolor mauris, tincidunt sit amet sagittis eget, suscipit et sapien. Praesent in commodo sem. Integer mollis nisi a massa facilisis volutpat. Vestibulum eleifend aliquam lectus, lobortis interdum mauris accumsan et. Donec a sapien velit. Etiam tincidunt dapibus lectus at faucibus. Maecenas lobortis malesuada iaculis.</p> 
<p>Proin suscipit auctor nunc id pulvinar. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean cursus molestie malesuada. Nunc justo erat, tincidunt a sodales vitae, commodo quis eros. Fusce elementum vehicula commodo. Nulla ac nibh lorem. Suspendisse pellentesque, dolor tempus congue porta, arcu purus accumsan orci, at rutrum erat nisi sagittis ante. Ut ornare lacus ac dolor sodales non interdum tortor suscipit. Etiam et placerat neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam euismod facilisis accumsan. Nam sed nibh a ipsum congue accumsan. Etiam molestie tempus dolor, at mattis felis iaculis et. Nunc in justo turpis, a auctor elit.</p> 
<p>Praesent at arcu ac magna tincidunt fringilla. Integer id ligula ut sapien ultrices tempor. Vivamus luctus nulla consectetur enim lacinia malesuada. Vivamus auctor elit vel erat porta in facilisis odio consequat. Curabitur ornare nibh lorem, quis pellentesque dolor. Curabitur in risus nisl, vitae imperdiet nulla. Vestibulum libero nisi, iaculis rhoncus dictum vel, lobortis quis quam. Vestibulum ullamcorper mauris et tortor gravida dapibus. Fusce ornare, urna ac ultrices elementum, sapien leo volutpat ligula, eu iaculis ipsum quam at quam. Sed placerat erat quis ligula condimentum volutpat. Fusce placerat luctus tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis elementum arcu ut dui aliquet laoreet. Donec aliquet eros ut mi ullamcorper vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed nunc vitae tellus elementum consequat quis sit amet lectus. Integer dignissim erat vitae dui faucibus sit amet viverra nisl euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi sed imperdiet sem.</p> 
<p>Donec nec turpis et ipsum ullamcorper euismod sit amet vel nibh. Nunc hendrerit rutrum justo, quis feugiat sapien pretium sed. Aenean elementum, odio nec semper mollis, neque tellus tincidunt dui, in elementum lectus magna eget elit. Morbi mi risus, rhoncus sit amet imperdiet a, commodo eu elit. Maecenas nec risus lacus. In arcu eros, auctor et gravida ac, suscipit a enim. Proin quis venenatis tortor. Aenean ultricies rutrum aliquam. Cras mi dui, lacinia sed ultricies ac, consequat eu augue. Morbi vel semper turpis. Nam adipiscing blandit sem a egestas. Donec ac tellus magna, sit amet dictum turpis. Proin sapien lacus, venenatis in placerat vitae, fermentum eu elit. Duis non enim et urna interdum tincidunt. Sed adipiscing commodo commodo. Integer pellentesque pharetra nulla, ut luctus nisl egestas quis. Quisque nec ante id leo adipiscing facilisis id ac ligula.</p> 
<p>Vestibulum a ante tortor. Mauris tempor est at nisi ullamcorper a venenatis justo commodo. Fusce blandit lacinia nisi, et pellentesque sem accumsan ut. Donec hendrerit nunc vitae erat sodales varius. Mauris dignissim mattis tincidunt. Sed purus erat, porta non blandit a, molestie et nulla. Vestibulum dolor augue, molestie sit amet imperdiet sed, elementum eu lorem. Vivamus lobortis varius semper. Morbi eget justo iaculis purus pulvinar dignissim. Phasellus sit amet ullamcorper sapien. Cras eleifend vulputate elit. Phasellus scelerisque tortor vel nibh sollicitudin vestibulum. Vivamus nec metus velit.</p> 
 
			</div>
		</div>

		<div class="sidebar" id="sideleft">
			Left 
		</div>

	</div>
	<div id="top_footer">
top footer
</div>
	<div id="footer">
		Footer 
	</div>

</div>

</body>
</html>

ps если я конечно правильно понял вашу проблему..
ваша ошибка в увлечении абсолютным и относительным позиционировании. при position:relative (как и position:absolute) элемент выпадает из стека (потока)

√BlackCat · 15.07.2011, 20:01

Вот набросал тут для Вас:

Код:

<!doctype html>
<html>
<head>
	<style type="text/css">
		div {
			border:1px solid black;
			border-collapse:collapse;
			}
		#global {
			width:500px;
			min-height:500px;
			
			}
		#head {
			width:498px;
			height:148px;
			
			background-color:red;
			}
		#lmenu {
			width:148px;
			min-height:298px;
			float:left;
			
			background-color:green;
			}
		#content {
			width:348px;
			min-height:298px;
			float:left;
			
			background-color:blue;
			}
		#footer {
			width:498px;
			height:148px;
			
			background-color:gray;
			}
	</style>
</head>
<body>
	<div id="global">
		<div id="head"></div>
		<div id="lmenu"></div>
			<div id="content"></div>
			<br class="clear:both;" />
		<div id="footer"></div>
	</div>
</body>
</html>

В данном случае (округляйте числа поскольку бордеры не склеивал что б было всё отчётливо видно) ширина и высота ровна 500px

высота указана минимальная 500px, ну в нашем случае дизайн требует такой высоты, например)
шапка и футер так же с фиксированым размером.
Если содержимое блока меню будет привышать заданные 300px высоты, блок меню будет растягиватся, при этом опуская ниже блок футера, но на контент это влиять не будет. Так жеи контент, в случае если содержимое контента будет привышать 300px, контент будет рости в высоту, а меню будет будет оставлять свой размер.

Я Надеюсь я правильно понял вашу мысль?)

redreem · 15.07.2011, 22:23

как дети мля

OverSet · 15.07.2011, 23:56

vladendark, √BlackCat: спасибо за советы, но это не то. Задача кроется в другом.

Сейчас попробую упростить задачу. Вот пример того, что должно быть:

Код:

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>резиновый розовый блок</title>
	<style type="text/css">
		body{
			margin:10px auto;
			width:300px;
		}
		#base{
			width:100%;
			border:1px solid;
		}
		#cont{
			height:150px;
			background:#ccf;
		}
		#mid{
			background:pink;
		}
		#dd{
			height:1%;
			position:relative;
			top:-150px;
			width:25px;
		}
	</style>
</head>
<body>
	<div id="base">
		<div id="cont"></div>
		<div id="mid">
			<div id="dd">text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text</div>
		</div>
	</div>
</body>
</html>

Здесь розовый блок работает (меняет высоту), но изначально зависит от всей высоты контента в блоке над ним. Нужно чтобы растягивание оного происходило только при переполнении верхнего блока, а если переполнения нет -- то минимальная высота, т.е. когда контента мало и он свободно умещается.

Еще в ходе экспериментов добился изменения высоты в % от контента, но увы, затерял пример(

Кстати, в примере выше я выставил hasLayout для старых ИЕ (<=6) height:1%, чтобы отн. позиционирование работало как можно правильней. В основном все пишу для совр. браузеров и вопрос кросс-браузерности пока отпадает.

Хотелось бы это реализовать именно на CSS, иначе в ход пойдут сценарии, а они не всегда и не у всех включены. Со схемами реализации колонок я знаком, но повторюсь, это не то.

Что ж, попробую по-другому сверстать страницу..

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Резиновый макет на div	Ok_	HTML, CSS, JavaScript	5	10.08.2012 19:18
Резиновый флеш	Wir2al	Технологии Flash	7	01.09.2010 14:35
резиновый вариант при таком бэкграунде?	Den_S	HTML, CSS, JavaScript	3	29.05.2009 22:06
Резиновый сайт	Soulkeeper	HTML, CSS, JavaScript	1	16.05.2009 13:54
Резиновый сайт	web_smile	HTML, CSS, JavaScript	21	13.03.2009 23:17

15.07.2011, 08:58	#2
vladendark	для нижнего блока попробуйте свойство {clear:both}

15.07.2011, 09:20	#3
√BlackCat	нижний блок я так понимаю Вас вообще не интересует ) что бы верхний не ставал больше, в стиль допишите ему Код: overflow:auto; но это будет скролинг уже. можно и без скролинга но контент будет обрезатся, а это не красиво. Для чего Вам нужен верхний блок фиксированым ? Может быть попробуем найти Вам альтернативное решение проблемы)

15.07.2011, 09:33	#4
vladendark	Решений масса. но верное я подскажу только после того, как увижу код

15.07.2011, 20:01	#8
√BlackCat	Вот набросал тут для Вас: Код: <!doctype html> <html> <head> <style type="text/css"> div { border:1px solid black; border-collapse:collapse; } #global { width:500px; min-height:500px; } #head { width:498px; height:148px; background-color:red; } #lmenu { width:148px; min-height:298px; float:left; background-color:green; } #content { width:348px; min-height:298px; float:left; background-color:blue; } #footer { width:498px; height:148px; background-color:gray; } </style> </head> <body> <div id="global"> <div id="head"></div> <div id="lmenu"></div> <div id="content"></div> <br class="clear:both;" /> <div id="footer"></div> </div> </body> </html> В данном случае (округляйте числа поскольку бордеры не склеивал что б было всё отчётливо видно) ширина и высота ровна 500pxвысота указана минимальная 500px, ну в нашем случае дизайн требует такой высоты, например) шапка и футер так же с фиксированым размером. Если содержимое блока меню будет привышать заданные 300px высоты, блок меню будет растягиватся, при этом опуская ниже блок футера, но на контент это влиять не будет. Так жеи контент, в случае если содержимое контента будет привышать 300px, контент будет рости в высоту, а меню будет будет оставлять свой размер. Я Надеюсь я правильно понял вашу мысль?)

15.07.2011, 23:56	#10
OverSet	vladendark, √BlackCat: спасибо за советы, но это не то. Задача кроется в другом. Сейчас попробую упростить задачу. Вот пример того, что должно быть: Код: <!doctype html> <html> <head> <meta charset="utf-8"> <title>резиновый розовый блок</title> <style type="text/css"> body{ margin:10px auto; width:300px; } #base{ width:100%; border:1px solid; } #cont{ height:150px; background:#ccf; } #mid{ background:pink; } #dd{ height:1%; position:relative; top:-150px; width:25px; } </style> </head> <body> <div id="base"> <div id="cont"></div> <div id="mid"> <div id="dd">text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text</div> </div> </div> </body> </html> Здесь розовый блок работает (меняет высоту), но изначально зависит от всей высоты контента в блоке над ним. Нужно чтобы растягивание оного происходило только при переполнении верхнего блока, а если переполнения нет -- то минимальная высота, т.е. когда контента мало и он свободно умещается. Еще в ходе экспериментов добился изменения высоты в % от контента, но увы, затерял пример( Кстати, в примере выше я выставил hasLayout для старых ИЕ (<=6) height:1%, чтобы отн. позиционирование работало как можно правильней. В основном все пишу для совр. браузеров и вопрос кросс-браузерности пока отпадает. Хотелось бы это реализовать именно на CSS, иначе в ход пойдут сценарии, а они не всегда и не у всех включены. Со схемами реализации колонок я знаком, но повторюсь, это не то. Что ж, попробую по-другому сверстать страницу..

15.07.2011, 07:14
Ссылки