Inita: 100% Höhe, fixe Bereiche und IE box model

Beitrag lesen

hi, das ging ja schneller, hatte freie Zeit =)

Nun, es kann probleme beschtehen, wenn du mit verschiedenen bg colors fuer content, footer, header deine seite machen moechtest. Sonst footer ist sticky in allen browsern, auch Mac, Mozilla, ueberprueft =).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>sticky footer</title>
<style type="text/css">
  body, html{
 font:11px Verdana, Arial, Helvetica, sans-serif;
 color:#000;
 background:#FFF;
 height:100%;
 padding:0;
 margin:0;}
  #page{
    width:800px;
 padding:0;
 margin-top:0;
 margin-right:auto;
 margin-bottom:110px;
 margin-left:auto;
 position:relative;
 top:0;
 min-height:100%; /* For Modern Browsers */
 height:auto !important; /* For Modern Browsers */
 height:100%; /* For IE */ }
  #header{
    margin:0;
 padding:0}
  #cont{
 margin:5px;
 padding-bottom:160px;
 height:auto !important;}
  #footer{
    width:100%;
 margin:0;
 padding:0;
 position:absolute;
 bottom: 0 !important;
 bottom:-1px;
 height:110px;}
</style>
</head>
<body>
<div id="page" style="border:1px solid">
  <div id="header" style="border:1px solid">
    <p>header</p><p>header</p><p>header</p>
  </div>
  <div id="cont" style="border:1px solid">
    <p>content</p><p>content</p><p>content</p>
  </div>
  <div id="footer" style="border:1px solid">
    <p>footer</p><p>footer</p><p>footer</p>
  </div>
</div>
</body>
</html>