development:css:fixed_header_footer

Fixed header/footer with shadow

If you need a static header on the web page for a menu system, or a static footer for some data (tips perhaps?) to be displayed, here is how.

Header HTML:

<div id="header" class="shadeh">content</div>

Header CSS:

#header {
position:fixed;
left:0px;
top:0px;
height:30px;
width:100%;
background:#999;
}
/* IE 6 */
* html #header{
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
div.shadeh:after {
content: "";
position: fixed;
top: 0px;
left: 0;
width: 100%;
height: 30px;
-webkit-box-shadow: 0px 0px 10px rgba&
  • development/css/fixed_header_footer.txt
  • Last modified: 2019/10/31 09:04
  • by 127.0.0.1