Неверное растягивание (скалирование) div блока по всей высоте body

b0s · May 20, 2011

Задача:

Разместить <div> контейнер, используя 90% страницы. Контейнер используется для отображения списка файлов.

Выглядеть должно так:

Причина обращения сюда - проблема проявляющаяся во время уменьшения окна:

Список файлов выезжает за пределы области, простите, "выезжая" и то что за ним )))).

Весь код:

<div class="files">
	<div class="title">Список файлов</div>
	<div class="list">  	  	  
		<div>
			<span class="file">Текстовый документ.txt</span><span>(81 б)</span>
		</div>
	</div>
	<div class="info">
		<div class="commonInfo">Файлов в папке: 1<span style="float:right">Общий размер: 81 б</span></div>
		<div path="/" id="path">Путь: /</div>
	</div>
</div>
<style>
html,body{
	height:100%;
	padding:0;
	margin:0;
	text-align:center;
}

.files {
	height:90%;
	width:22%;
	min-width:316px;
        background:green;
}
.title {
	position:relative;
	margin-bottom:10px
}

.list {
	position:relative;
	width:95%;
	overflow:auto;
	height:inherit;
	background:gray;
	display:block;
	text-align:center;
}
.commonInfo {
	text-align:left;
	position:relative;
}
</style>

Edited May 20, 2011 by b0s

b0s · May 20, 2011

Получается, что все браузеры неверно растягивают блок с процентной высотой, находящийся в блоке с процентной высотой? Моя логика, конечно, не самая простроенная и правильная, но мне кажется, что 90% блока, должны пропорционально уменьшать и увеличивать блок, в зависимости от высоты родителя, но внутри родителя визуально, всёравно занимать 90%...

А со словом скалирование, я переборщил...

Edited May 20, 2011 by b0s

Gaspode · May 20, 2011

А вы в чём смотрите? У меня нормально всё везде - с этим кодом.

b0s · May 20, 2011

А вы в чём смотрите? У меня нормально всё везде - с этим кодом.

Все четыре основных браузера. Opera, Safari, Firefox и Internet Explorer 7.

Простите. Забыл параметр фона задать к .files. Исправил.

Надо что бы всё было внутри слоя с зелёным фоном и за него не выходило.

А при уменьшении окна, содержимое .files как раз опускается за границы. Весь слой .files, всегда должен занимать 90% от страницы, при этом слой .list, всегда должен занимать примерно 90% от слоя .files, для того что бы слои .title и .info дружелюбно и правильно разделяли всё пространство .files с .list, который сам должен быть резиновым и растягиваться пропорционально, но что бы не было всегда быть 90%.

Проблема о которой я говорю, заключается в том что list не пропорционально уменьшается вместе с files. Я не понимаю почему так происходит. Но так во всех браузерах на сколько я помню. Сейчас перепроверю.

Edited May 20, 2011 by b0s

b0s · May 21, 2011

И вот к сожалению я опять не могу найти в поисковике ничего полезного. Возможно потому, что не знаю как правильно задать вопрос. Я читал про Резиновый дизайн, искал про "div в div", много чего писал. К сожалению получается, что даже моего десяти летнего опыта работы с компьютером не хватает что бы написать правильный поисковый запрос. С другой стороны, честное слово, я не понимаю почему код не работает как должен.

Потому, снова обратился сюда.

Edited May 21, 2011 by b0s

b0s · May 21, 2011

О. Кажется до меня дошло! Вротмненоги! Да я же только, что из первой группы дедсадика перешел в первую с половиной! Ура!

Если высота .list определяется процентами, значит всё должно определяться процентами. Текст ведь не уменьшается? Ведь между .list и нижней границей .files пространство уменьшается, а текст остаётся того же размера, и потому не умещается в остатке свободного места .files.

Так дорогие участники. Как же мне сделать, что бы .list был максимального размера, вне зависимости от размера окна, но при этом не выдворял из пространства .files, область .commonInfo? Текст ведь должен быть всегда одного размера... наверное...

Edited May 21, 2011 by b0s

Softlink · May 21, 2011

а у серого блока высота фиксированная должна быть или в зависимости от кол-ва текста?

b0s · May 21, 2011

а у серого блока высота фиксированная должна быть или в зависимости от кол-ва текста?

Спасибо за ответ Softlink!

Наверное фиксированная, но зависящая от размера .files. То есть, если уменьшается окно браузера, уменьшается .files, а также должен уменьшаться и .list ориентируясь на .files, но так что бы .info оставался на своём месте внизу и не выезжал за границы .files, в прочем как и всё содержимое.

Прошу прощения за offtop.

Хахаха! Softlink, у вас очень хороший авторский сайт! Выглядит здорово и чувствуется, такая, рука характера и харизмы. Я крайне редко вижу такого типа сайты, очень творческий такой. Побольше бы таких. Пожалуйста, не сочтите меня за "подлизателя". А ещё, почему то сразу вспомнил дизайн Артемия Лебедева. Простите если скажу мнение, о котором вы не спрашивали. Мне, очень сильно, не хватило в Словотеке полосы прокрутки.

Edited May 21, 2011 by b0s

Softlink · May 21, 2011

за сайт спасибо. С полосой разберусь - она куда-то исчезла :facepalmxd:

А по теме, то вот так у меня получилось, чтобы нижний блок никуда не уходил. Но высота зависит от количества контента.

Голова сегодня туговато соображает. Может еще покопаю и придумаю, или ребята предложат.

Вот код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251" />
<head>
<title>Пример</title>
</head>
<style>
body {
height:100%;
margin:0;
font-size:12px;
}

.main{
position:absolute;
min-height:90%;
background:green;
width:22%;
overflow:hidden;
text-align:center;
}

.text{
height:90%;
width:95%;
background:gray;
margin:0 auto;
text-align:left;
overflow:hidden;
}

.left{
float:left;
margin:10px;
}

.right{
float:right;
margin:10px;
}

#path{
margin-top:10px;
clear:both;
}
</style>

<body>
	<div class="main">
		Список файлов
		<div class="text">
			Текстовый документ.txt(81 б)
			Текстовый документ.txt(81 б)
			Текстовый документ.txt(81 б)
			Текстовый документ.txt(81 б)
			Текстовый документ.txt(81 б)
			Текстовый документ.txt(81 б)
			Текстовый документ.txt(81 б)
			Текстовый документ.txt(81 б)
			Текстовый документ.txt(81 б)
			Текстовый документ.txt(81 б)
			Текстовый документ.txt(81 б)
			Текстовый документ.txt(81 б)
			Текстовый документ.txt(81 б)
			Текстовый документ.txt(81 б)
			Текстовый документ.txt(81 б)
			Текстовый документ.txt(81 б)
			Текстовый документ.txt(81 б)
			Текстовый документ.txt(81 б)
			Текстовый документ.txt(81 б)

		</div>

		<span class="left">Файлов в папке: 1</span>  <span class="right">Общий размер: 81 б</span>
                <div id="path">Путь: /</div>
	</div>
</body>
</html>

b0s · May 21, 2011

за сайт спасибо. С полосой разберусь - она куда-то исчезла :facepalmxd:

А по теме, то вот так у меня получилось, чтобы нижний блок никуда не уходил. Но высота зависит от количества контента.

Голова сегодня туговато соображает. Может еще покопаю и придумаю, или ребята предложат.

Вот код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251" />
<head>
<title>Пример</title>
</head>
<style>
body {
height:100%;
margin:0;
font-size:12px;
}

.main{
position:absolute;
min-height:90%;
background:green;
width:22%;
overflow:hidden;
text-align:center;
}

.text{
height:90%;
width:95%;
background:gray;
margin:0 auto;
text-align:left;
overflow:hidden;
}

.left{
float:left;
margin:10px;
}

.right{
float:right;
margin:10px;
}

#path{
margin-top:10px;
clear:both;
}
</style>

<body>
	<div class="main">
		Список файлов
		<div class="text">
			Текстовый документ.txt(81 б)
			Текстовый документ.txt(81 б)
			Текстовый документ.txt(81 б)
			Текстовый документ.txt(81 б)
			Текстовый документ.txt(81 б)
			Текстовый документ.txt(81 б)
			Текстовый документ.txt(81 б)
			Текстовый документ.txt(81 б)
			Текстовый документ.txt(81 б)
			Текстовый документ.txt(81 б)
			Текстовый документ.txt(81 б)
			Текстовый документ.txt(81 б)
			Текстовый документ.txt(81 б)
			Текстовый документ.txt(81 б)
			Текстовый документ.txt(81 б)
			Текстовый документ.txt(81 б)
			Текстовый документ.txt(81 б)
			Текстовый документ.txt(81 б)
			Текстовый документ.txt(81 б)

		</div>

		<span class="left">Файлов в папке: 1</span>  <span class="right">Общий размер: 81 б</span>
                <div id="path">Путь: /</div>
	</div>
</body>
</html>

Да в любом случае спасибо вам, за время уделённое проблеме. Как бы там не было, рано или поздно вопрос решится. Сейчас посмотрю.

Softlink, благодаря вам, похоже, решился вопрос с выпрыгиванием за границы, но остался другой момент. Как сделать так что бы список файлов (.text), всегда был растянут практически на всё пространство .main?

Softlink · May 21, 2011

Softlink, благодаря вам, похоже, решился вопрос с выпрыгиванием за границы, но остался другой момент. Как сделать так что бы список файлов (.text), всегда был растянут практически на всё пространство .main?

вооот. В этом сейчас и проблема. Подумаю еще.

А вы не пробовали это сделать таблицей? Или надо исключительно на дивах?

p.s. спасибо за полосу прокрутки)) Все восстановил, все работает.

b0s · May 21, 2011

По моему "height:90%;" у .text не работает. Я его убрал, и визуальных изменений нет. Наверное это потому, что по правилам, "height:90%;" действителен только при наличии этого же параметра у родителя, а "min-height:90%" не задаёт "height " родителю.

Softlink · May 21, 2011

По моему "height:90%;" у .text не работает. Я его убрал, и визуальных изменений нет. Наверное это потому, что по правилам, "height:90%;" действителен только при наличии этого же параметра у родителя, а "min-height:90%" не задаёт "height " родителю.

да, он не работает. Его можно убрать. Это я не доглядел, пока выкладывал.

b0s · May 21, 2011

Softlink, благодаря вам, похоже, решился вопрос с выпрыгиванием за границы, но остался другой момент. Как сделать так что бы список файлов (.text), всегда был растянут практически на всё пространство .main?
вооот. В этом сейчас и проблема. Подумаю еще.
А вы не пробовали это сделать таблицей? Или надо исключительно на дивах?
p.s. спасибо за полосу прокрутки)) Все восстановил, все работает.

Я знаю эту причу про ребят из виларибо и вилабаджо)))))))))))))))) Права даже не думал об этом... Я всё пытался на основе слоев сделать... Но думаю ваш совет вполне разумен.

Пожалуйста за полосу, всегда рад помочь! Сайт классный! У меня так вряд ли получилось бы, я скорей кодировщик, в плане дизайна вообще никто, а у вас мне кажется есть вкус и талант.

Прощу прощения за Offtop.

Ещё кстати, про сайт. В первом разделе, появляется полоса прокрутки когда открывается раздел в виде таблиц, хотя видимого продолжения внизу нет. Возможно это вам пригодится.

Softlink · May 21, 2011

что-то мне подсказывает, что если высота задается в процентах, то мы никак не растянем див на всю высоту. Она всегда будет зависеть от кол-ва контента.

b0s · May 21, 2011

что-то мне подсказывает, что если высота задается в процентах, то мы никак не растянем див на всю высоту. Она всегда будет зависеть от кол-ва контента.

Боюсь, вы неизбежно правы, и я перешел на вариант с таблицами.

Softlink · May 21, 2011

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

ну я про таблицы тоже только предположил :facepalmxd: , но не знаю, растянется ли все это. Надо смотреть. Самому уже интересно стало

b0s · May 21, 2011

Растянется

Уже растягивается, да ещё и с улыбкой)))))))))))

Я конечно переделаю разметку под нужды, но в общем это она же.

<style>
body {
height:100%;
margin:0;
font-size:12px;
}

.main{
position:absolute;
height:90%;
background:green;
width:22%;
min-width:250px;
text-align:center;
}

.text{
width:95%;
height:90%;
background:gray;
margin:0 auto;
text-align:left;
overflow:auto;
vertical-align:top;
}

.left{
float:left;
margin:10px;
}

.right{
float:right;
margin:10px;
}

#path{
margin-top:10px;
clear:both;
}
</style>

<table class="main">
			<tr>
				<td>Список файлов</td>
			</tr>
			<tr  class="text">
				<td>
                        Текстовый документ.txt(81 б)
                        Текстовый документ.txt(81 б)
                        Текстовый документ.txt(81 б)
                        Текстовый документ.txt(81 б)
                        Текстовый документ.txt(81 б)
                        Текстовый документ.txt(81 б)
                        Текстовый документ.txt(81 б)
                        Текстовый документ.txt(81 б)
                        Текстовый документ.txt(81 б)
                        Текстовый документ.txt(81 б)
                        Текстовый документ.txt(81 б)
                        Текстовый документ.txt(81 б)
                        Текстовый документ.txt(81 б)
                        Текстовый документ.txt(81 б)
                        Текстовый документ.txt(81 б)
                        Текстовый документ.txt(81 б)
                        Текстовый документ.txt(81 б)
                        Текстовый документ.txt(81 б)
                        Текстовый документ.txt(81 б)

				</td>
			</tr>			
			<tr>
				<td>
						<span class="left">Файлов в папке: 1</span>  <span class="right">Общий размер: 81 б</span>
						<div id="path">Путь: /</div>
				</td>
			</tr>
		</table>

Softlink · May 21, 2011

получается вопрос решен? :facepalmxd:

p.s. самый крайний вариант на дивах - это задавать каждому блоку position:absolute и вымерить отступы. Тогда тоже все заработает.

b0s · May 21, 2011

p.s. самый крайний вариант на дивах - это задавать каждому блоку position:absolute и вымерить отступы. Тогда тоже все заработает.

Мне почему то кажется, что это попахивает фиксированной непроцентной разметкой. Ммм?

получается вопрос решен?

Думаю, да. Скорей всего с 99% вероятностью решен.

Edited May 21, 2011 by b0s

Softlink · May 21, 2011

p.s. самый крайний вариант на дивах - это задавать каждому блоку position:absolute и вымерить отступы. Тогда тоже все заработает.
Мне почему то кажется, что это попахивает фиксированной непроцентной разметкой. Ммм?

почти. Можно и процентами попробовать все отмерить. Но это самый последний способ и подойдет он, если нет ничего больше на страничке.

например вот так все прекрасно работает:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251" />
<head>
<title>Пример</title>
</head>
<style>
body {
height:100%;
margin:0;
font-size:12px;
}

.main{
position:absolute;
height:90%;
background:green;
width:22%;
overflow:hidden;
text-align:center;
}

.text{
position:absolute;
height:90%;
width:90%;
background:gray;
margin:0px 10px 0px 10px;
text-align:left;
}

.left{
position:absolute;
display:block;
top:93%;
left:5%;
}

.right{
position:absolute;
display:block;
top:93%;
left:55%;
}

#path{
position:absolute;
top:96%;
left:40%;
}
</style>

<body>
	<div class="main">
		Список файлов
		<div class="text">
			Текстовый документ.txt(81 б)


		</div>

		<span class="left">Файлов в папке: 1</span>  <span class="right">Общий размер: 81 б</span>
                <div id="path">Путь: /</div>
	</div>
</body>
</html>

Edited May 21, 2011 by Softlink

b0s · May 21, 2011

p.s. самый крайний вариант на дивах - это задавать каждому блоку position:absolute и вымерить отступы. Тогда тоже все заработает.
Мне почему то кажется, что это попахивает фиксированной непроцентной разметкой. Ммм?
почти. Можно и процентами попробовать все отмерить. Но это самый последний способ и подойдет он, если нет ничего больше на страничке.
например вот так все прекрасно работает:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251" />
<head>
<title>Пример</title>
</head>
<style>
body {
height:100%;
margin:0;
font-size:12px;
}

.main{
position:absolute;
height:90%;
background:green;
width:22%;
overflow:hidden;
text-align:center;
}

.text{
position:absolute;
height:90%;
width:90%;
background:gray;
margin:0px 10px 0px 10px;
text-align:left;
}

.left{
position:absolute;
display:block;
top:93%;
left:5%;
}

.right{
position:absolute;
display:block;
top:93%;
left:55%;
}

#path{
position:absolute;
top:96%;
left:40%;
}
</style>

<body>
	<div class="main">
		Список файлов
		<div class="text">
			Текстовый документ.txt(81 б)


		</div>

		<span class="left">Файлов в папке: 1</span>  <span class="right">Общий размер: 81 б</span>
                <div id="path">Путь: /</div>
	</div>
</body>
</html>

Мне почему то кажется что вариант с таблицей самый хороший, хотя и громоздкий. Он простой и довольно понятный.

Softlink · May 21, 2011

Мне почему то кажется что вариант с таблицей самый хороший, хотя и громоздкий. Он простой и довольно понятный.

само собой, это же таблица)) Там все предельно ясно.

b0s · May 21, 2011

Мне почему то кажется что вариант с таблицей самый хороший, хотя и громоздкий. Он простой и довольно понятный.
само собой, это же таблица)) Там все предельно ясно.

Я читал форумы на эту тему, со знакомым программистом болтал, и на форумах и программист дали мне знать, что вёрстка таблицами признак плохого тона. Я с тех пор таблицы решил использовать только когда действительно собираешься делать таблицу.

Softlink · May 21, 2011

об этом спорят при каждом удобном случае. В вашем примере результат на лицо. :facepalmxd:

b0s · May 21, 2011

об этом спорят при каждом удобном случае. В вашем примере результат на лицо.

Согласен! Спасибо вам за совет! Очень дельный.

Sign In

Неверное растягивание (скалирование) div блока по всей высоте body

Question

Link to comment

Share on other sites

25 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

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

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