How can we keep the footer at the bottom of the browser no matter what resolution the user has? If you are stuck with this kind of question, here goes a cool remedy. Need to have a little knowledge of CSS too.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Footer at the bottom, off course of the browser!</title>
<style>
*
{
margin: 0;
}
html, body
{
height: 100%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.content
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -35px;
}
.footer
{
height: 35px;
background-color: #7c7c7c;
color: #fff;
text-align: center;
}
.gapDiv
{
height: 35px;
}
</style>
</head>
<body>
<div class="content">
This is my body!
<div class="gapDiv"></div>
</div>
<div class="footer">
here is the Footer
</div>
</body>
</html>
Enjoy! works fine on any browser.
No comments:
Post a Comment