PROWAREtech
CSS: Position Page Footer at the Bottom
How to position the page footer at the bottom for all browsers including IE6.
This article is about how to always make the footer appear at the bottom of the page using HTML and CSS. This code is compatible with IE6 and newer browsers.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Footer Positioning</title>
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background-color: #444444;
color: white;
background-image: url(https://picsum.photos/id/135/1920/1080);
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
div#container {
position: relative;
width: 100%;
font-family: sans-serif;
height: auto !important;
height: 100%;
min-height: 100%;
}
div#header {
background-color: black;
line-height: 100px;
height: 100px;
}
div#header h1 {
margin: 0;
padding: 0 0 0 10px;
}
div#main {
padding: 10px 10px 125px 10px; /* bottom padding should be greater than or equal to footer height */
}
div#footer {
position: absolute;
width: 100%;
bottom: 0;
background: black;
text-align: right;
line-height: 100px;
height: 100px;
}
div#footer p {
margin: 0;
padding: 0 10px 0 0;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Acme</h1>
</div>
<div id="main">
<h1>IE6 Compatible</h1>
</div>
<div id="footer"><!-- must use a DIV for compatibility with IE6 -->
<p>copyright © Acme</p>
</div>
</div>
</body>
</html>
Coding Video
Comment
