HTML - Header and footer

November 2016

The header on a web page displays the website's name, purpose and/or its logo. The footer on a web page is a place where you can display copyright information or credits for example. It is possible to have a PHP file or a JavaScript-text embedded in the "head" and "foot" of every webpage. Webmasters can use a method to move the common HTML code into separate header.php and footer.php files. Webmasters may manually code or copy and paste the header and footer HTML code from a reliable source into each web page or file. You can use CSS and place it in external files that will improve the web page's loading speed and will also make it easier to maintain and update.

Issue


Is it possible to include a header and footer file using HTML? I have my file (saved as an .html) and need to be able to include the HTML in the header and footer. Does anyone know how I can do this?

Solution



<!-- 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>

Note


Thanks to abc for this tip on the forum.

Related :

This document entitled « HTML - Header and footer » from CCM (ccm.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the license, as this note appears clearly.