VPF::Правильно расположить header, body, footer

Innuendo

Дата 25.7.2007, 20:58 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 745
Регистрация: 24.12.2005
Где: Молдова

Репутация: 1
Всего: 6

Сразу извиняюсь, если название темы не совсем раскрывает суть.
Есть документ, нужно разбить его на 3 части: header, body и footer. Header и footer - это дивы. Body - это iframe. Мне нужно чтоб footer всегда был в самом низу страницы, а body имел авто-размен (всю полость между header'ом и footer'ом). Т.е. к примеру, если нажмут Ф11 , чтоб внизу не появилось свободное место, а растянулось всё.

Вот как этот скелет выглядит сейчас:

Код


<!-- Header //-->
<html>
 <head>
   <title> Test Program </title>
 </head>
<body>
 <div style="width: 99%; height: 100px; background-color: steelblue;" >
   Heading
 </div>
<!-- #end Header //-->

<!-- body //-->
<iframe src = "body_frame.php" style = 'border:0px; background-color: yellow; width: 99%' ></iframe>
<!-- end: body //-->

<!-- FOoter //-->
 <div style="width: 99%; height: 50px; background-color: steelblue;" >

   Footer

 </div>

</body>

</html> 
<!-- End: footer //-->

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

japanes

Дата 25.7.2007, 21:50 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 176
Регистрация: 20.1.2007

Репутация: 7
Всего: 7

Код


<body>
<style>
html {height: 100%;}
body {margin:0px;padding:0px; height:100%;}
div#layout {
position:relative;
min-height:100%;//height:100%;
margin:0px;
padding:0px;
}
div#header{
padding:0px;
margin:0px;
height:100px;
}
div#footer {
position:absolute;
left:0px;
bottom:0px;
width:100%;
height:100px;
background-color:green;
}
div#footer_spacer{
margin:0px;
padding:0px;
height:100px;/* высота футера */
}
</style>
<div id="layout">
<div id="header">header</div>
...
<div id="footer_spacer"></div>
<div id="footer">footer</div>
</div>
</body>

SelenIT

Дата 25.7.2007, 23:05 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Цитата(japanes @ 25.7.2007, 21:50

)

Сорри, но в чем преимущество сей магии перед банальным margin-ом?

Innuendo, как вариант:

Код


<style>
html {height: 100%;}
body {margin:0; padding:0; height:100%;}
div#body {
  position:relative;
  min-height:100%;
  margin: -100px 0;
  padding: 0;
}
div#body iframe {
  position: absolute;
  top: 100px;
  bottom: 100px;
  width: 100%;
}
  div#header{
  position: relative;
  z-index: 2;
  height:100px;
  background-color:yellow;
  margin: 0 0 -100px 0;
}
  div#footer {
  height:100px;
  border: 0;
  background-color:green;
  margin: -100px 0 0 0;
}
</style>
<!--[if IE]>
<style>
div#body { height:100%; }
div#body iframe { height: expression(parentNode.clientHeight - 200 + 'px'); }
</style>
<![endif]-->
<body>
  <div id="header">header</div>
  <div id="body">
    <iframe src="http://forum.vingrad.ru/" frameborder="0"></iframe>
  </div>
  <div id="footer">footer</div>
</body>

Проверено в IE6-7, FF2, Opera 8-9, Safari 3b (WinXP). Не растягивает iframe только Safari. Авось к релизу и там ситуация улучшится...

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

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Innuendo

Дата 26.7.2007, 09:59 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 745
Регистрация: 24.12.2005
Где: Молдова

Репутация: 1
Всего: 6

cпасибо, работает.

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

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »