Hi all
Can anybody tell me how to make a fixed footer / header with the help of CSS.
Thanks
Can anybody tell me how to make a fixed footer / header with the help of CSS.
Thanks
How to make....
- Thread starter Computer Master
- Start date
set the position
B
BlueBoden
Guest
In my experience, footer + header layouts are best achieved using a float based layout, optionally combined with relative positioning.
Have a look at the CSS Float Based Layouts or Equal Height Columns using Floats.
Have a look at the CSS Float Based Layouts or Equal Height Columns using Floats.
fixed header / footer
here is the code for your question
<!-- IE in quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title>Fixed header and footer</title>
<style type="text/css">
body{
margin:0;
padding:header-<length> 0 footer-<length> 0;
}
div#header{
position:absolute;
top:0;
left:0;
width:100%;
height:header-<length>;
}
div#footer{
position:absolute;
bottom:0;
left:0;
width:100%;
height:footer-<length>;
}
@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>:thumbsup:
here is the code for your question
<!-- IE in quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title>Fixed header and footer</title>
<style type="text/css">
body{
margin:0;
padding:header-<length> 0 footer-<length> 0;
}
div#header{
position:absolute;
top:0;
left:0;
width:100%;
height:header-<length>;
}
div#footer{
position:absolute;
bottom:0;
left:0;
width:100%;
height:footer-<length>;
}
@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>:thumbsup:
I always create headers/footers using scripting languages like PHP or ASP.net. That way you can re-use the same piece of code for all pages and if you need to change the header or footer you only need to make the change once instead of for every page.
I agree. Better use header.php and footer.php. You'll then have to edit only these 2 files.
Hope this helps
Creating a web layout with a fixed header and footer is quite easy in your modern browsers like Firefox, IE7/IE8, Opera, Safari, Chrome, etc. It's simply done by using the CSS property declaration position: fixed. Unfortunately,browser IE6 does not support the fixed value, and treats it as if it were position: static which is far from the results that position: fixed achieves.
Similar threads
