Tuesday, December 13, 2011

Fixed header and footer by CSS

http://limpid.nl/lab/css/fixed/header-and-footer

<style type="text/css">
 body{
  margin:0;
  padding:100px 0 30px 0;
 }
 div#header{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:30px;
  background:black;
  color:White;
 }
 div#footer{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:30px;
  background:black;
 }
 @media screen{
  body>div#header{
   position:fixed;
  }
  body>div#footer{
   position:fixed;
  }
 }
 * html body{
  overflow:hidden;
 }
 * html div#content{
  height:100%;
  overflow:auto;
 }
</style>
<div id="header"> header
</div>
<div id="footer"> footer </div>
<div id="content"> content </div>