HTML – CSS: Footer Always at Bottom

A basic template of a web page, where the footer section of the page remains always at the bottom of the screen, regardless from the content height.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Layout Example</title>
<style type="text/css">
html, body { 
    margin:0; padding:0; 
    height:100%; 
    font-size:12px; font-family:Verdana, Geneva, sans-serif; 
}

.container { width:900px; position:relative; margin:0 auto; }
.body { min-height:100%; position:relative; }

/**
 * padding-bottom -> the "computed" height of the footer (height + padding).
 * In this example 20 + 10 + 10 = 40 (height + padding-top + padding-bottom)
 */
.main { padding-bottom:40px; }

.header { background-color:#006600; color:#FFFFFF; margin-bottom:10px; padding:10px; }
.page { background-color:#CCCCCC; padding:10px; }

.footer { position:absolute; bottom:0; display:block; width:100%; z-index:1000; }
.footer .container { 
    background-color:#000000; color:#FFFFFF; 
    padding:10px; height:20px; 
}

</style>
</head>

<body><div class="body">
<div class="main container">
    <div class="header"><strong>Header</strong></div>
    <div class="page">Page content</div>
</div>

<div class="footer">
    <div class="container"><strong>Footer</strong> <em>always at bottom ;)</em></div>
</div>

</div>
</body>
</html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s