Помогите плиз с min-height 100% и двумя div'ами

Torner · April 9, 2010

Приветствую всех! Помогите плиз.

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

Первый div с min-height 100% и фоновое изображение левого бордера, в него вложен еще один div тоже с min-height 100% и с изображением правого бордера.

Так вот, первый бордер(который левый) отображается хорошо и тянется до самого подвала сайта, а вот второй вложенный div с правым бордером хоть убейся, но не тянется до подвала, а только равен высоте контента. Уже весь день мучаюсь, ничего не получается с ним сделать.

HTML код:

<div id="leftborder">
	<div id="rightborder">
		<div id="content">		
Content: Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. Quisque vitae pede. Nam et augue. Sed a elit. Ut vel massa. Suspendisse nibh pede, ultrices vitae, ultrices nec, mollis non, nibh. In sit amet pede quis leo vulputate hendrerit. Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit.
		</div>
	</div>
</div>

<div id="footer">
</div>

CSS код:

/* Left Border
——————————————————————————- */

#leftborder {
	width: 900px;
	margin: 0 auto;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	background: #fdbf02 url(../images/leftborder.jpg) repeat-y left;
}

/* Right Border
——————————————————————————- */

#rightborder {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	background: url(../images/rightborder.jpg) repeat-y right;
}


/* Content
—————————————————————————--*/
#content {
	padding: 20px 53px 0;
}

Картинка результата(правый бордер ограничивается высотой контента и не тянется до подвала. Почему не работает min-height 100% в этом диве и как это исправить?):

Edited April 9, 2010 by Torner

Great Rash · April 9, 2010

Повесьте leftborder.jpg на бекграунд <html>, а rightborder.jpg на бекграунд <body>. Тогда min-height надо будет задать только для <body>.

Torner · April 9, 2010

Great Rash

Дело в том, что у меня на бекграунде html уже висит текстура репитищаяся по x и y. А на бекграунде боди висит изображение шапки сайта.

В моем случае я вижу один выход - это взять одно изображение с макета сайта по ширине равной 900 пикселей, вырезать цент и оставить только правый и левый бордеры, потом сделать это изображение фоном дива leftborder и зарепитить по y. Таким образом с одним дивом и одним изображением делаются эти бордеры.

Но мне бы хотелось узнать, почему в моей ситуации с двумя картинками и двумя дивами вылезает такой косяк. Я думал, что это какой-то баг, который решается каким-то действием... Почему min-height: 100% не работает во вложенном блоке, если в родительском блоке тоже стоит min-height: 100% ???

stars · April 9, 2010

не понятно зачем это все:

	min-height: 100%;
	height: auto !important;
	height: 100%;

Я бы предложил для <html> и <body> задать height: 100% далее <div id="leftborder"> <div id="rightborder"> аналогично сделать height: 100% и задать им background еще я бы <div id="footer"></div> внес под под теже самые дивы...

А вообще было бы хорошо или увидеть станицу гденить на хосте, ну или хотя бы код целиком посмотреть...

Torner · April 9, 2010

stars
не понятно зачем это все:

min-height: 100%;
	height: auto !important;
	height: 100%;

Это все для нашего любимого ИЕ 6:))) Можно было и обойтись одним min-height, но ИЕ этого не понимает. А мин-хейт для того, чтобы прижать футер к низу страницы независимо, есть ли контент или нет.

А вообще было бы хорошо или увидеть станицу гденить на хосте

Извините, но не могу, т.к. у меня пока сайт только на Денвере делается, к хостеру я его еще не закачивал...

Все-таки хочется услышать у профи ответ на мой вопрос - почему min-height: 100% не работает во вложенном блоке, если в родительском блоке тоже стоит min-height: 100% ?

stars · April 10, 2010

проблема не в min-height, а в

height: auto !important;

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

Sign In

Помогите плиз с min-height 100% и двумя div'ами

Question

Torner

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

Torner

Link to comment

Share on other sites

stars

Link to comment

Share on other sites

Torner

Link to comment

Share on other sites

stars

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information