Sometimes you want the footer of your page to always be available at the same height no matter how much you resize your web browser. This is called a sticky footer. Here is a pretty simple way to code it for your site.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sticky footer</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
height:100%;
margin: 0 auto;
color:#000000;
}
#container
{
height:90%;
}
#footer
{
height:10%;
clear:both;
background:#A3A3A3;
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<h1>This is a sticky footer example</h1>
</div>
<div id="footer">This is my sticky footer</div>
</body>
</html>
No comments:
Post a Comment