Перейти к содержанию

"Резиновая" высота div'ного блока.

-=WaMpIr=-

Автор -=WaMpIr=-
в Компьютерная помощь

 Поделиться

Рекомендуемые сообщения

-=WaMpIr=-

-=WaMpIr=-

Опубликовано
Опубликовано

Всем привет. Уже не первый раз задаю вопросы по web, просто ни на одном известном мне сайте не дают нормального ответа.

Возникла одна мааленькая проблема, ответа на которую я не нашёл ни в гугле, ни в яндексе. В общем, есть div блок, или ячейка таблицы(без разницы) в котором нет никакой инфы, только фоновая картинка. Нужно сделать так, что бы этот блок/ячейка растягивался на всю высоту сайта. Тоже самое что width:100%, но вот с height это не прокатывает, он просто ставит высоту блока такую, какая высота у картинки. Делать высокую картинку бессмысленно, да и весить она будет много. на край могу напичкать этот блок контентом, вот только каким, не знаю, потому что ширина данного блока 116px.

Спасибо.

vit9696

vit9696

Опубликовано
Опубликовано

А почему нельзя сделать фиксированную высоту в пикселах?

-=WaMpIr=-

-=WaMpIr=-

Опубликовано
  • Автор
Опубликовано

Дело в том, что контент на сайте меняется, прибавляется, убавляется, в следствии чего высота самой страницы меняется, если указывать в пикселях то это может быть либо очень много, либо мало. Это один из трёх вертикальных блоков на сайте. Остаётся только одно, связывать все три, либо его с каким-то одним блоком.

-=WaMpIr=-

-=WaMpIr=-

Опубликовано
  • Автор
Опубликовано

В статьях написано через связывание всех трёх колонок, что для меня немножко проблематично сделать. Придётся тогда переписывать...

Спасибо.

Urotsuki

Urotsuki

Опубликовано
Опубликовано
В статьях написано через связывание всех трёх колонок, что для меня немножко проблематично сделать.

А как надо? Можно, например, сделать одинаковую высоту для двух колонок, а остальные оставить как есть. На примере с JQuery это будет выглядеть так:

Раскрывающийся текст:

 

<!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>"Резиновая" высота div'ного блока</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>
.column {width:20%;float:left}
.first {background:red}
.second{background:blue}
.third{background:green}
</style>
<script type="text/javascript">
	 var k = jQuery.noConflict();
	 function equalHeight(group) {
		 var tallest = 0;
		 group.each(function() {
			 thisHeight = k(this).height();
			 if(thisHeight > tallest) {
				 tallest = thisHeight;
			 }
			 });
		 group.height(tallest);
	 }		
	 k(document).ready(function(){
		 equalHeight(k(".column"));
	}); 
	 </script>
</head>
<body>
<div>
<div class="first column">1<br/></div>
<div class="second column">2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/></div>
</div>
<div class="third">3</div>
</body>
</html>

 

 

В связываемые по высоте колонки добавляем класс, указанный в скрипте.

С другими примерами не смотрел как так сделать.

kos1nus

kos1nus

Опубликовано
Опубликовано (изменено) 

<html>
<style>
#test{
background: url('http://www.kaspersky.ru/images/news/gibrid.png') no-repeat #555555;
height: 100%;
width: 100%;
}
</style>
<div id='test'></div>
</html>

хз, у меня вот так нормально растягивает все без "контента"

 

 

Дело в том, что контент на сайте меняется, прибавляется, убавляется, в следствии чего высота самой страницы меняется, если указывать в пикселях то это может быть либо очень много, либо мало. Это один из трёх вертикальных блоков на сайте. Остаётся только одно, связывать все три, либо его с каким-то одним блоком.
я не знаю что за сайт, я не знаю что и как там реализовано, но я знаю что это решается другими способами. див растягивает по длине/ширине контента, разве ни это надо? Изменено пользователем kos1nus
Urotsuki

Urotsuki

Опубликовано
Опубликовано

kos1nus

"height: 100%" растягивает на высоту окна, а не на высоту контента...

kos1nus

kos1nus

Опубликовано
Опубликовано
kos1nus

"height: 100%" растягивает на высоту окна, а не на высоту контента...

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

 

что за мера такая "высота сайта"? какая высота сайта, например, у фанклуба ЛК?

 

 

тем более автор четко написал

Тоже самое что width:100%
ну так вот я представил пример, где height работает точно так же как и width.
Urotsuki

Urotsuki

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

Растягивается сам. Но нужно чтобы растягивался на общую высоту контента на странице, как я понял. Контент в других колонках может располагаться ниже высоты окна ("height: 100%"):

Раскрывающийся текст:

<html>
<style>
#test{
background: url('http://www.kaspersky.ru/images/news/gibrid.png') no-repeat #555555;
height: 100%;
width: 20%;
float: left;
}
#test2{
background: #000555;
width: 20%;
float: left;
}
#test3{
background: #555000;
width: 20%;
float: left;
}
</style>
<div id='test'></div>
<div id='test2'>11111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111
<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>
1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>
1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>
1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>
1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>
1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>
1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>
1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>
1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>
1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>
1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>
1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>
1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>
1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>
1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>
1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>
1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>1111111111<br>
1111111111<br>1111111111<br>11111</div>
<div id='test3'>11111<br>11111</div>
</html>

 

Изменено пользователем Urotsuki

Пожалуйста, войдите, чтобы комментировать

Вы сможете оставить комментарий после входа в



Войти
 Поделиться
Перейти к списку тем
×
×
  • Создать...