Category

Проблема со 100% div высотой в нескольких рядом стоящих блоках.

В своём последнем проекте "Photographer Alina Reynbakh" я столкнулс я с проблемой что если содержимое "блока 1" менньше по высоте чем содержимое "блока 2" то левый розовый блок не занимает всё доступное место.
100% height div
Кто-то мне возмодно посоветует что-то вроде этого в CSS файле:
html {height: 100%;}
body {height: 100%;margin: 0;}
#container {position: relative;min-height: 100%;}
* html #container {height: 100%;}
#header {height: 150px;}
#footer {height: 150px;position: relative;margin-top:-150px;}
#left-block{min-height: 100%;}
* html #left-block{height: 100%;}
Но в моём случае это не сработало.

Я хочу вам посоветовать использовать один трюк найденный мной в интернете в случае если к моменту прочтения вами этой статьи ещё не вышел CSS3:
Используйте однопиксельную по высоте картинку, которую нужно поместить в обрамляющий div (который является родительским для блоков 1 и 2) и при помощи repeat-y растянуть на всю высоту.
Выглядеть это будет примерно так:

<div style="background-image: url(pinkBg.gif); background-repeat: repeat-y;">
<div class="left-block">...</div>
<div class="main-content">...</div>
</div>

Где pinkBg.gif - та самая однопиксельная картинка которая даёт видимость полной высоты левого блока при чем сам блок таковым может и не быть.
Вот и весь фокус :)

Ещё одна проблема с которой вы можете столкнуться - это проблема приклеивания какой-то части содержимого к дну этой области. Например здесь:
100% height div
...мне ну очень хотелось прилепить кляксы к футеру, но фактически они находятся в левом блоке.
Единственное решение данной проблемы на сегодняшний день - очень похоже на предыдущее. Положить картинку бекграундом на обрамляющий div но без repeat-y, зато с background-repeat на этот раз.
Так что предыдущий пример будет выглядеть примерно вот так:

<div style="background-image: url(pinkBg.gif); background-repeat: repeat-y;">
<div style="background-image: url(blots.png); background-position:left bottom;">
<div class="left-block">...</div>
<div class="main-content">...</div>
</div>
</div>

Для всех работающий примеров из этой статьи - обращайтесь к моему первоисточнику этих проблем, указанному в начале статьи :)

Удачной верски! ;)

Comments

А насчет темы с кляксой

А насчет темы с кляксой достаточно было поставить картинку и стелай позишен абсолют и топ лефт 0 плюс марджин от низа и слева и поставить зиндекс 0, а нужных текстовых блоков позишен куалтевив и зиндекс больше 0

Ну насчет 100% блоков,

Ну насчет 100% блоков, конечно вариант в голове крутится меено такой картинку на бэкграунд, н окак быт ьесли у тебя для 6 картинок а поставить можно только одну так как сайт не только тянется вниз на 100% но еще и стояит растяжка по ширине, а картинок 6?
по вашему примеру нужно 6 обромляющих див блока. :-(

Согласен, вариантов решений

Согласен, вариантов решений просто уйма. Только вот все они относятся к "workaround". Поэтому искренне жду CSS 3.0
Ваш вариант в предыдущем комменте вполне адекватен но в моем случае проблем с несколькими картинками не было :)

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <em> <strong> <cite> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.

More information about formatting options

CAPTCHA
Это простая проверка на то, что со мной общается человек, а не глупая машина. Умные машины тоже не приветствуются :)
Image CAPTCHA
Enter the characters shown in the image.
© 2008-2009. Konstantin Artemov