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

Блок высотой 100% от экрана в FF,Opera для XHTML 1.1 Как ?

Бочонок

Бочонок

http://frontender.info
Блок высотой 100% от экрана в FF,Opera для XHTML 1.1 Как ?

Доброго времени суток.

Нужно создать блок с минимальной высотой 100% от экрана для XHTML 1.1.
Тоесть изначально - 100%, но если текста слишком много - тянется по высоте.
Написал следующее: (в конце поста)
В результате в IE все хорошо. А в FF,Opera etc. Все плохо. Высота блоков=0...
Помогите разобраться в чем проблема!
Так как высота определена для всей иерархии то "100%" должно корректно обрабатыватся... (По спецификации процентное соотношение обрабатывается только тогда когда у родителя явно определена величина, от которой считаем проценты. В данном случае - высота.)

Очень надеюсь на вашу помощь.

Страничка:
PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<link rel="stylesheet" href="css/styles.css" type="text/css"/>
</head>
<body>
<div id="warning_block">
	<div id="top_left_bg_block">
			<div id="bottom_left_bg_block">
                                             ... множество информационных блоков
			</div>
	</div>
</div>

</body>
</html>
Стили:

PHP: 
BODY{
margin:0px;
padding:0px;
width:100%;
min-width:100%;
font: 12px Arial, Verdana, Helvetica, sans-serif;
background: #113689 url("../img/bg_gradient.gif") 100% 0px repeat-y;
height:auto !important;
height:100%;
min-height:100%;
}

#warning_block{
height:auto !important;
height:100%;
min-height:100%;
}

#top_left_bg_block{
height:auto !important;
height:100%;
min-height:100%;
background: url("../img/top_left_bg.jpg") 0px 0px no-repeat;
}

#bottom_left_bg_block{
height:auto !important;
height:100%;
min-height:100%;
background: url("../img/bottom_left_bg.jpg") 0px 100% no-repeat;
}
 
Бочонок

Бочонок

http://frontender.info
Спасибо за ссылку.
Статью http://xhtml.ru/2005/12/12/body_height_research/ я прочитал.
Все равно не получается! Обьясните, где напутал, пожалуста! :(
Опять только в IE работает!

HTML
PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html><head><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<link rel="stylesheet" href="css/styles.css" type="text/css"/>
</head>
<body>

<div id="inner_block_1">
	<div id="inner_block_2">
text
	</div>
</div>

</body>
</html>
СSS:
PHP: 
html {
  height:100%;
}
 body {
  margin:0;
  padding:0;
  height:auto !important;
  height:100%;
  min-height:100%;
  background-color:#0000ff;
}

#inner_block_1{
  height:auto !important;
  height:100%;
  min-height:100%;
  background-color:#00ff00;
}

#inner_block_2{
  height:auto !important;
  height:100%;
  min-height:100%;
  background-color:#ff0000;
}
-~{}~ 07.10.06 16:04:

При следующей конструкции #inner_block_1 тянется как надо, а
#inner_block_2 нет:

PHP: 
HTML{
height: 100%; 
margin: 0; 
padding: 0;
}
BODY{
height: 100%;
margin: 0;
padding: 0;
background: #0000ff;
}


#inner_block_1{
min-height: 100%;
background-color:#00ff00;
}

* html #inner_block_1{
height: 100%;
}

#inner_block_2{
min-height: 100%;
background-color:#ff0000;
}

* html #inner_block_2{
height: 100%;
}
 

denver

?>Скриптер
Бочонок
С чего ты взял что * html { ... } должно работать? Что по твоему значит звездочка?
 
Бочонок

Бочонок

http://frontender.info
встречал в статьях как "хак" IE.
Все браузере кроме IE 5-6 должны его игнорировать.
Вроде бы работает...

Помогите пожалуста! Просто не знаю что делать :( :( :(
Очень нужно что бы несколько вложеных друг в друга блоков имели минимальную высоту 100% рабочей области браузера и тянулись, в случае слишком большого количества содержимого.
А максимум чего я пока смог добится - 1 блок вложенный в body...

Очень надеюсь на вашу подсказку.
 

denver

?>Скриптер
Бочонок
Ты же сам написал ответ:
>>(По спецификации процентное соотношение обрабатывается только тогда когда у родителя явно определена величина, от которой считаем проценты. В данном случае - высота.)

Кто родитель у #inner_block_2? У этого родителя задана высота?
 
Бочонок

Бочонок

http://frontender.info
Спасибо. Ты прав...
Тоесть сделать тянущимся и высотой 100% можно только 1 блок?
или есть какие то альтернативы ?

------------------

Вообще то задача - сделать страничку, которая в 4 углах отображает некий фон. Например "уголки"
Тоесть нужно 4 блока внутри body с высотой 100%.
100% height будет нормально наследоватся, пока мы не установим ее в auto.
height:auto! important;

тоесть мы можем прикрепить 2 верхних куска фона со стилем
#top_right_bg_block{
height:100%;
min-height:100%;
background: url("../img/top_right_bg.jpg") 100% 0px no-repeat;
}

#bottom_left_bg_block{
height:100%;
min-height:100%;
background: url("../img/bottom_left_bg.jpg") 0px 100% no-repeat;
}
(они не будут тянутся, при переполнении но этого и не надо - картинки только в верху...)

а затем еще один со стилем
#bottom_right_bg_block{
height:auto!important;
height:100%;
min-height:100%;
background: url("../img/bottom_right_bg.jpg") 100% 100% no-repeat;
}

Но остается еще одна проблема - как прикремпить последний, четвертый нижний "уголок" ?
Есть идеи ?
Подскажите пожалуста! Очень нужно...
 

denver

?>Скриптер
Спасибо. Ты прав...
Тоесть сделать тянущимся и высотой 100% можно только 1 блок?
Нажмите для раскрытия...
Блин. Сделай у элемента и _каждого_ его родителя height: 100%.

-~{}~ 07.10.06 18:54:

По поводу уголков почитай в инете как их делать (резиновыми в обе стороны если надо) а потом добавь всё что надо чтобы боксы были 100% высоты.
 
Бочонок

Бочонок

http://frontender.info
если у нас у всех родителей высота 100% - то блоки в мозиле, опере и компании тянутся не будут.
это только ie height как min-height принимает.
или я что то путаю?
по крайней мере эмпирически если убрать автовысоту - сначала во всех броузерах на высоту экрана все что нужно растягивается, а вот когда контента больше чем высота экрана - тянутся не хочет.

ЗЫ. по поводу уголков на весь эран ни одной статьи не нашол.
А прсто уголки сделать - это во первых просто, а во вторых я нашел и прочел пару статей. Вроде бы вложеныне блоки - наилучший вариант.

-~{}~ 07.10.06 19:22:

при этом если height задавать только для IE то все равно не работает :(
 
Войдите или зарегистрируйтесь для ответа.
Сверху