Advanced

Sticky Header and Footer Html5 and Css3

by muthu 2014-04-19 19:48:32

Sticky Header and Footer Html5 and Css3
-------------------------------------------------HTML5-------------------------------------------------
<div id="header">
<div id="header">Header</div>
</div>
<div id="container">
<div id="content">
<p>Page content Here Page content Here Page content Here Page content Here Page content Here Page content Here Page content Here
Page content Here Page content Here Page content Here Page content Here Page content Here Page content Here Page content Here
Page content Here Page content Here Page content Here Page content Here Page content Here Page content Here Page content Here </p><br>
<p>Page content Here Page content Here Page content Here Page content Here Page content Here Page content Here Page content Here
Page content Here Page content Here Page content Here Page content Here Page content Here Page content Here Page content Here
Page content Here Page content Here Page content Here Page content Here Page content Here Page content Here Page content Here </p><br>
<p>Page content Here Page content Here Page content Here Page content Here Page content Here Page content Here Page content Here
Page content Here Page content Here Page content Here Page content Here Page content Here Page content Here Page content Here
Page content Here Page content Here Page content Here Page content Here Page content Here Page content Here Page content Here </p><br>
<p>Page content Here Page content Here Page content Here Page content Here Page content Here Page content Here Page content Here
Page content Here Page content Here Page content Here Page content Here Page content Here Page content Here Page content Here
Page content Here Page content Here Page content Here Page content Here Page content Here Page content Here Page content Here </p><br>
<p>Page content Here Page content Here Page content Here Page content Here Page content Here Page content Here Page content Here
Page content Here Page content Here Page content Here Page content Here Page content Here Page content Here Page content Here
Page content Here Page content Here Page content Here Page content Here Page content Here Page content Here Page content Here </p><br>
</div>
</div>
<div id="footer">
<div id="footer">Footer Content</div>
</div>

-------------------------------------------------CSS3-------------------------------------------------
body { margin:0; padding:0; }
#header { background:#25c9ff; border:1px solid #666; height:60px; left:0; position:fixed; width:100%; top:0; }
#header{ line-height:60px; margin:0 auto; width:940px; text-align:center; }
#container { margin:0 auto; overflow:auto; padding:80px 0; width:940px; }
#content{}
#footer { background:#333; border:1px solid #666; bottom:0; height:60px; left:0; position:fixed; width:100%; }
#footer { line-height:60px; margin:0 auto; width:940px; text-align:center; }

968
like
0
dislike
0
mail
flag

You must LOGIN to add comments
Tags
More...
Comments