Меню
Что нового?

div на всю высоту экрана

talgat

Новичок
div на всю высоту экрана

Проблема в следующем.
Если в дочернем div много информации, то он растягивается по высоте, но родительский div при этом не растягивается. Необходимо, чтобы родительский div всегда был по высоте на весь экран, независимо от количества информации в дочернем.

Возможно ли это как-нибудь исправить без:
1. использования таблиц
2. убирания парметра html{height:100%;}
3. использования JavaScript


<?xml version="1.0" encoding="windows-1251"?>
<!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=windows-1251" />
<style type="text/css">
* {
margin:0;
padding:0;
}
html{height:100%;}
body{height:100%;}
</style>
<title>titled</title>
</head>
<body>
<div style="background-color:#fff723;height:100%;width:100%; text-align:center;line-height:100%">

<div style="background-color:#33FFCC;width:200px;">
<br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br />
<br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br />
<br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br />
<br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br />
<br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br />
<br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br />
aaa
</div>

</div>
</body>
</html>
 

IIIEPJIOK

Новичок
#mainDiv:{
top: 0px;
left: 0px;
height: 100%;
width: 100%;
position: absolute;
}
#childDiv{
top: 20%;
left: 20%;
width: 60%;
position: absolute;
}

<div id="mainDiv">
<div id="childDiv"/>
</div>
так по идеи должно работать
 

GrayHound

Новичок
это работать не будет. Проценты в высоте будут работать только если у родительского элемента указана высота, причём высота само собой в em и px должна быть указана
 

talgat

Новичок
Автор оригинала: IIIEPJIOK
не знаю как у вас, у меня все работает....
Нажмите для раскрытия...
Вот при таком коде не работает.


<?xml version="1.0" encoding="windows-1251"?>
<!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=windows-1251" />
<style type="text/css">
* {
margin:0;
padding:0;
}
html{height:100%;}
body{height:100%;}

#mainDiv{
top: 0px;
left: 0px;
height: 100%;
width: 100%;
position: absolute;
}
#childDiv{
top: 20%;
left: 20%;
width: 60%;
position: absolute;
}



</style>
<title>titled</title>
</head>
<body>



<div id="mainDiv" style="background-color:#fff723;">

<div id="childDiv" style="background-color:#33FFCC;width:200px;">
<br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br />
<br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br />
<br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br />
<br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br />
aaa
</div>

</div>
</body>
</html>
 

IIIEPJIOK

Новичок
Вы, что просили?

Необходимо, чтобы родительский div всегда был по высоте на весь экран, независимо от количества информации в дочернем.
а по всей видимости хотели, не "на весь экран, независимо от количества информации в дочернем" , а не меньше чем экран.? я правильно понял....
дык верстайте таблицами
-~{}~ 07.03.08 13:21:

вот мой вариант
{убрал свой вариант :)}
 

talgat

Новичок
Я хотел:
1. Если информации на странице мало, то родительский div занимает весь экран
2. Если инофрмации на странице много (появляется скрол), то родительский div должен быть не меньше дочернего

В связи с этим, интересовало, возможно ли это не прибегая к следующим действиям:
1. использования таблиц
2. убирания парметра html{height:100%;}
3. использования JavaScript
 

IIIEPJIOK

Новичок
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Пример</title>
<style>
body{
background-color: #ffffff;
height: 100%;
margin: 0px;
}
#bg{
top: 0px;
left: 0px;
min-height: 100%;
width: 100%;
position: absolute;
background-color: #00ff00;
border: none;
}
#parent1{
background-color: #00ff00;
padding: 20px;
position: relative;
}
#child1{
background-color: #ffff00;
}
</style>
</head>
<body>
<div id="bg" >

<div id="parent1">
<div id="child1">
<br /> <br /><br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br />
<br /> <br /><br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br />
<br /> <br /><br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br />
<br /> <br /><br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br />
sdfsd
</div>
</div>
lmkm./
</div>
</body>
</html>
как вам такой вариант?(отредактировал)
 

talgat

Новичок
Не совсем. В вашем варианте не выполняется условие "1. Если информации на странице мало, то родительский div занимает весь экран"

<div id="bg" >
</div>
Нажмите для раскрытия...
Всего лишь закрашивает свободную область. С таким же успехом можно было для body установить background-color: #00ff00;

---------------------
Судя по всему без таблицы никак...
 

IIIEPJIOK

Новичок
Точно, в ИЕ не проверил.....
Ну, в итоге:
ИЕ не нравится так:
#bg{
top: 0px;
left: 0px;
min-height: 100%;
width: 100%;
position: absolute;
background-color: #00ff00;
border: none;
}

ФФ и Опрера не хочет вот так:
ИЕ не нравится так:
#bg{
top: 0px;
left: 0px;
min-height: 100%;
height: 100%;
width: 100%;
position: absolute;
background-color: #00ff00;
border: none;
}
надо найти способ объединить два варианта :)
 

dimagolov

Новичок
а хаки ( // в стилях чтобы ИЕ игнорировал строчку) не пробовали?
 

SelenIT

IT-лунатик :)
> Проценты в высоте будут работать только если у родительского элемента указана высота, причём высота само собой в em и px должна быть указана

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

Лучший (имхо) хак для IE6 (добавить в конец первого варианта):
* html #bg { height: 100%; }
Еще лучше - условные комментарии.

И не надо забывать, что с <?xml version="1.0" encoding="windows-1251"?> (или еще чем угодно перед доктайпом) IE6 падает в Quirks mode. Вряд ли это то, что требуется)
 
Войдите или зарегистрируйтесь для ответа.
Сверху