Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Правильно расположить header, body, footer

Автор: Innuendo 25.7.2007, 20:58

Сразу извиняюсь, если название темы не совсем раскрывает суть.
Есть документ, нужно разбить его на 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

Код


<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

Цитата(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

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