Проблемма с высотой блоков

JoseRodriguez · June 1, 2011

здравствуйте

не так давно начал верстать и столкнулся со следующей проблемой.

имеется сайт - kvartiry.pl.ua

есть блок с фоном (div.bg), а так же блок с контентом (div.content)… идея такова, что блок с фоном должен растягиваться на 100% по высоте родительского блока div.body который в свою очередь растягивается блоком с контентом (в зависимости от наполнения)

собственно проблема заключается в следующем…

добившись желаемого результата в опере и IE9 заметил, что firefox преподнес сюрприз…

блок с фоном вместо того, что б растянуться по высоте родительского блока растягивается на 100% экрана… проблема, как я могу судить, заключается в свойстве селектора height в стиле div.bg… поскольку вместо того, что б растянуться по высоте родительского блока выше упомянутый блок растягивается по высоте экрана

признаться честно уже и не знаю как решить эту проблему без отклонений от задуманной верстки ((

заранее благодарен за ответ)

Edited June 1, 2011 by JoseRodriguez

psywalker · June 1, 2011

Вся проблема в абсолютном незнании технологии. Вот это вот что такое?

    display: table;
    height: 100%;
    position: absolute;

У тебя этот контейнер растягивается на высоту родителя, а родитель для него <body>, а не <div class="body">, как ты наверное думаешь.

JoseRodriguez · June 1, 2011

момент с высотой мне известен, но из-за отсутствия практики в использовании селектора position видимо ввел себя в заблуждение (а именно при использование top, left, bottom, right когда у родителя заданно position:relative)...

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

второй вариант задать блоку с фоном position:relative, а блоку с контентом absolute... в таком случае как заставить блоку с контентом растягивать родителя, использованием bottom?

psywalker · June 2, 2011

Ставя блоку display: table; ты напрочь убиваешь в нём релатив, и потомок с абсолютом уже НЕ пляшет от него, а пляшет от ближайшего родителя с тем же релативом например или body.

Я ж тебе говорю, ты везде зачем-то навешал display: table;, только непонятно совсем, для чего?

JoseRodriguez · June 2, 2011

относительно display: table в div.body проглядел(

что касается блока с фоном, мне пришлось "реализовать" таблицу... поскольку при использовании просто блока не выходит выровнять центральный блок (div.bg div.center) по центру и добиться чтоб его обтекали два бока - left и right, которые в свою очередь должны равномерно расширятся на ширину экрана за минусом ширины центрального блока =/

п.с. возможно я чего не знаю, буду рад выслушать ваше мнение)

psywalker · June 2, 2011

относительно display: table в div.body проглядел(
что касается блока с фоном, мне пришлось "реализовать" таблицу... поскольку при использовании просто блока не выходит выровнять центральный блок (div.bg div.center) по центру и добиться чтоб его обтекали два бока - left и right, которые в свою очередь должны равномерно расширятся на ширину экрана за минусом ширины центрального блока =/
п.с. возможно я чего не знаю, буду рад выслушать ваше мнение)

1. Ссылку на мини пример.

2. Скриншоты того, как должно быть и как не должно.

JoseRodriguez · June 2, 2011

по-сути на сайте отображается все как нужно, если не брать во внимание тот момент, что блок с фоном (div.bg) не растягивается по высоте родителя или же блока с контенктом (div.center)

схематически отобразить версту можно следующим образом:

psywalker · June 2, 2011

Понял, а теперь что нужно получить? И что не устраивает?

JoseRodriguez · June 2, 2011

меня интересует как растянуть блок с фоном (div.bg) по высоте родительского блока (div.body), который в свою очередь растягивается блоком с контентом(div.content)... иными словами как растянуть абсолютно позиционированный блок по высоте родителя

psywalker · June 2, 2011

меня интересует как растянуть блок с фоном (div.bg) по высоте родительского блока (div.body), который в свою очередь растягивается блоком с контентом(div.content)... иными словами как растянуть абсолютно позиционированный блок по высоте родителя

А почему например нельзя положить в красный блок и жёлтый, нижний?

JoseRodriguez · June 2, 2011

преложенный вами вариант интересен и должен признаться по нему изначально я и пошел, правда я обошелся без желтого блока и контент сайта разместил сразу в синем блоке... но меня интересовала возможность разделить графическую составляющую от наполнения, потому решил попробовать верстать так сказать "слоями")

Edited June 2, 2011 by JoseRodriguez

Great Rash · June 2, 2011

Use <table> Luke!

JoseRodriguez · June 2, 2011

использовать таблицу думаю стоит только из-за того, что ИЕ6/7 не реагирует на display или ошибаюсь?)

psywalker · June 2, 2011

А нафига таблица, хочешь растянуть слой внутри, тогда используй для него абсолют и растягивай top: 0; bottom:0; width: 100%; Если нужно ИЕ6, то экспрешан.

Только этот слой отдельно.

JoseRodriguez · June 4, 2011

а разве при использовании селектора top не игнорируеться селектор bottom? если не ошибаюсь у вас же на сайте читал об этом Оо

psywalker · June 4, 2011

а разве при использовании селектора top не игнорируеться селектор bottom? если не ошибаюсь у вас же на сайте читал об этом Оо

У меня на сайте?

Нет, не игнорируется для абсолюта, фикседа во всех браузерах кроме IE6, там нужен экпрешан.

JoseRodriguez · June 4, 2011

хм, странно... возможно я настолько не везучий но при указании одновременно top и bottom адекватно ведет себя только опера, остальные браузеры напрочь отказываются реагировать на bottom

Edited June 4, 2011 by JoseRodriguez

psywalker · June 4, 2011

хм, странно... возможно я настолько не везучий но при указании одновременно top и bottom адекватно ведет себя только опера, остальные браузеры напрочь отказываются реагировать на bottom

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

JoseRodriguez · June 4, 2011

http://kvartiry.pl.ua/new2.html


<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">

	body, div {margin:0px;padding:0px;}
	body {background:#f5f5f5;height:100%;width:100%;}

	div.body {position:relative;width:100%;background:red;}
	div.bg {background:green;position:absolute;width:inherit;z-index:5;display:table;top:0px;bottom:0px;}
	div.content {position:relative;width:1000px;z-index:10;background:blue;margin:0 auto;}

	</style>
</head>
<body>
	<div class="body">
		<div class="bg"> </div>

		<div class="content"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
	</div>
</body>
</html>

нашел в чем проблема... выходит если блоку задать display:table; и одновременно top:0px; bottom:0px; то в этом случае огненыйлис и ИЕ игнорируют отступ снизу...

Edited June 4, 2011 by JoseRodriguez

JoseRodriguez · June 4, 2011

Огромнейшее спасибо за советы, нашел решение своей проблемы

Может кому пригодиться:

CSS


body, div {margin:0px;padding:0px;}
body {background:#f5f5f5;height:100%;width:100%;}

div.body {width:100%;}

div.bg {position:absolute;width:inherit;z-index:5;top:0px;bottom:0px; background:url(/img/shadow_02.png) center bottom no-repeat;}
div.bg div {position:absolute;top:0px;bottom:10px; #z-index:6;}
div.bg div div {background:url(/img/city_01.png) left bottom no-repeat; right:0px; left:0px; bottom:0px;}
div.bg div.left {background:url(/img/shadow_00.png) right bottom repeat-y;width:auto; left:0px; right:50%; margin:0px 500px 0px 0px;}
div.bg div.center {background:#e4f3fa url(/img/city_00.png) center bottom no-repeat;width:1000px; left:50%; margin:0px 0px 0px -500px;}
div.bg div.right {background:url(/img/shadow_01.png) left bottom repeat-y;width:auto; left:50%; right:0px; margin:0px 0px 0px 500px;}

div.content {position:relative;width:1000px;z-index:10;margin:0 auto;}

HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>Полтавское агенство недвижимости - GreenHouse</title>
	<link rel="stylesheet" type="text/css" href="/css/main.css" />
</head>
<body>
	<div class="body">
		<div class="bg">
			<div class="left"> </div>

			<div class="center"> </div>
			<div class="right"><div> </div></div>
		</div>
		<div class="content"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
	</div>
</body>
</html>

Edited June 4, 2011 by JoseRodriguez

Sign In

Проблемма с высотой блоков

Question

Link to comment

Share on other sites

19 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

Join the conversation

Обсуждения

Important Information