
В своём последнем проекте "Photographer Alina Reynbakh" я столкнулс я с проблемой что если содержимое "блока 1" менньше по высоте чем содержимое "блока 2" то левый розовый блок не занимает всё доступное место.

Кто-то мне возмодно посоветует что-то вроде этого в 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 - та самая однопиксельная картинка которая даёт видимость полной высоты левого блока при чем сам блок таковым может и не быть.
Вот и весь фокус :)
Ещё одна проблема с которой вы можете столкнуться - это проблема приклеивания какой-то части содержимого к дну этой области. Например здесь:

...мне ну очень хотелось прилепить кляксы к футеру, но фактически они находятся в левом блоке.
Единственное решение данной проблемы на сегодняшний день - очень похоже на предыдущее. Положить картинку бекграундом на обрамляющий 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