GyanCode: Fixed header and footer

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Fixed header and footer</title>
<style type="text/css">
html, body { margin:0; padding:0; font-family: verdana; font-size: 13px;}
html, body { height:100%;}
#top-bar {position:fixed; top:0px;left:0px;height:50px;width:100%; z-index:999; overflow:hidden;}
#topbar-inner, #footer-inner { background: #03bf95; text-align: center; color: #FFF;font-size: 18px; padding: 9px;}
#footer { position:fixed; bottom:0; width:100%; height:40px; z-index:999;}
.inner { padding:50px 0; position:relative;}
p { margin:0 0 1em; font-size: 13px;}
#contain-all { width: 60%; margin: 0px auto; padding: 20px;}
</style>
</head>
<body>
<div id="outer">
<div id="contain-all">
 <div class="inner">
 This is an experimental layout and untested in a real situation but preliminary
 results look good. Note that opera 10.6 has introduced a bug where if the page has been scrolled and then refresh is clicked the fixed elements will disappear. 
 The header and footer need to be a fixed height and are therefore not suited to large amounts of fluid content.
 Good browsers get normal fixed positioning but ie6 and under make use of a bug in ie6 where children of elements that have overflow defined behave as though they are fixed.
 some text to wrap : some text to wrap : some text to cause scrolling :
 : some text to wrap : some text to wrap : some text to cause scrolling :
 : some text to wrap : some text to wrap : some text to cause scrolling :
 : some text to wrap : some text to wrap : some text to cause scrolling :
 : some text to wrap : some text to wrap : some text to cause scrolling :
 : some text to wrap : some text to wrap : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 Last bit of text
 </div>
</div>
</div>
<div id="top-bar">
<div id="topbar-inner">Fixed Top & bottom</div>
</div>
<div id="footer">
<div id="footer-inner"> Fixed footer </div>
</div>
</body>
</html>

Gyancode

A free library of HTML, CSS, JS

Search This Blog

Sunday 12 March 2017

Fixed header and footer

No comments :

Post a Comment