Форум Сайтостроение Веб-строительство

Как растянуть div блок на всю высоту страницы средствами CSS?

12
N
На сайте с 30.07.2012
Offline
0
njuha
25719

Верстаю шаблон div'ами. Вроде всё нормально, но вот столкнулся с проблемой...

Вот схематический рисунок шаблона:

Центральный блок в зависимости от контента растягивается на всю ширину страницы. А вот левый и правый блок имеют в себе меньший объём информации и обрезаются там, где кончаются блоки. Соответственно центральный блок имеет продолжение, а боковые обрываются.

Как исправить?

Пробовал различными heigh. Последний вариант:

#back_bottom_left {

width:224px;

background-image:url(../images/rgkz_06.jpg);

background-repeat:repeat-y;

float:left;

height: expression((document.body.clientHeight + eval(document.body.scrollTop)) + "px");

}

#back_bottom_center {

width:543px;

background-image:url(../images/rgkz_07.png);

background-repeat:repeat-y;

float:left;}

#back_bottom_right {

height:100%;

width:224px;

background-image:url(../images/rgkz_06_2.png);

background-repeat:repeat-y;

float:left;

height: expression((document.body.clientHeight + eval(document.body.scrollTop)) + "px");

}

LovelAss
На сайте с 05.06.2009
Offline
96
LovelAss
#1

Родительскому/родительским блокам задайте высоту.

N
На сайте с 30.07.2012
Offline
0
njuha
#2
LovelAss:
Родительскому/родительским блокам задайте высоту.

Вроде задана:

#back_bottom {

height:100%;}

там такая структура. 

<div id="back_bottom">

<div id="back_bottom_left">блоки</div>



<div id="back_bottom_center">

контент

</div>





<div id="back_bottom_right">блоки</div>

</div>

CSS 

#back_bottom {

	height:100%;}

	

#back_bottom_left {

	width:224px;

	height:100%;

	background-image:url(../images/rgkz_06.jpg);

	background-repeat:repeat-y;

	float:left;

	}

	

#back_bottom_center {

	width:543px;

	background-image:url(../images/rgkz_07.png);

	background-repeat:repeat-y;

	float:left;}

	

#back_bottom_right {

	height:100%;

	width:224px;

	background-image:url(../images/rgkz_06_2.png);

	background-repeat:repeat-y;

	float:left;

	}
LovelAss
На сайте с 05.06.2009
Offline
96
LovelAss
#3
html, body {
height: 100%;
}

...и далее вниз по дереву блоков/таблиц.

N
На сайте с 30.07.2012
Offline
0
njuha
#4
LovelAss:
...и далее вниз по дереву блоков/таблиц.

Уже стоит.

Вот файлы, если надо:

http://rghost.ru/39478538

N
На сайте с 30.07.2012
Offline
0
njuha
#5
LovelAss:
...и далее вниз по дереву блоков/таблиц.

Уже стоит.

Вот ссылка на файлы, если надо:

http://rghost.ru/39478538

Saitoff
На сайте с 27.05.2011
Offline
71
Saitoff
#6

Если на css свет клином не сошелся, то можно скриптом. Проверено в деле, работает.

<script type="text/javascript">
var oldHandler = window['onload'];
window['onload'] = function() {
if(typeof(oldHandler) == 'function') {
oldHandler();
}
setHeight();
};
function setHeight() {
var b1 = document.getElementById('content');
var b2 = document.getElementById('block1 , blok2');
if (!b1 || !b2) return;
var h1 = b1.offsetHeight;
var h2 = b2.offsetHeight;
if (h1 > h2) {
b2.style.height = (h1) + 'px';
b1.style.height = (h1) + 'px';
}else if (h1 < h2) {
b1.style.height = (h2) + 'px';
b2.style.height = (h2) + 'px';
}
}
</script>

content - ваш центральный блок

block1 , blok2 - боковые

N
На сайте с 30.07.2012
Offline
0
njuha
#7
Saitoff:
Если на css свет клином не сошелся, то можно скриптом. Проверено в деле, работает.



content - ваш центральный блок
block1 , blok2 - боковые

Запихивать надо ведь между хедами, да?

Не помогает...

Saitoff
На сайте с 27.05.2011
Offline
71
Saitoff
#8
njuha:
Запихивать надо ведь между хедами, да?
Не помогает...

Значит не правильно запихиваете... У меня работает.

[Удален]
#9

Да не нужно никаких скриптов прикручивать, фигнёй занимаетесь. Для таких задач вырезается картинка к примеру 1000х5 и повторяется по вертикали.

AV
На сайте с 31.07.2012
Offline
1
Alex_vgf
#10

height:100%

от 45% до 60% комиссионных, уровней (http://detskigorodok.ru/index.php?route=affiliate/login)
12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий