You can simply add a css style for your header
and footer
like this:
header {
width:100%;
height:20%; //your desired height
position:absolute;
top:0;
left:0;
background-color:blue;
}
footer{
width:100%;
height:20%; //your desired height
position:absolute;
bottom:0;
left:0;
background-color:blue;
}
Another way to do this is to separate the header, the footer, and the body into three different divs:
<html>
<head></head>
<body>
<div id="body">
<div id="header">your header content</div>
<div id="bodycontainer">your body content</div>
<div id="footer">your footer content</div>
</div>
</body>
</html>
To display the header and the footer using the full width of the page, use this CSS:
#body
{
width:100%;
height:100%; // the desired height
position:absolute;
top:0;
left:0;
}
#header
{
width:100%;
height:20%; // the desired height
position:absolute;
top:0;
left:0;
background-color:blue;
}
#footer
{
width:100%;
height:20%; // the desired height
position:absolute;
bottom:0;
left:0;
background-color:blue;
}
The header will be at the top of your page and the footer at its bottom. Both use the entire screen width.
Check this fiddle: