On my main page, I have an empty div with only a background image. To prevent it from collapsing, I created a sticky footer using the following code:
* {
margin:0;
padding:0;
}
html, body, #wrapper{
height: 100%;
}
body > #wrapper {
height: 100%;
min-height: 100%;
}
#main {
padding-bottom: 40px; /* Same height as the footer, this ensures that if the content grows, the padding goes behind the footer and not within the content */
}
#footer {
position: relative;
margin-top: -40px; /* Negative height of the footer to make it move up and avoid vertical scrolling */
height: 40px;
clear:both;
background: #c00;
} <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link href="style.css" rel="stylesheet" type="text/css"/>
<title>Template 1</title>
</head>
<body>
<div id="wrapper">
<div id="header">
Header goes here
</div><!--end header -->
<div id="navbar">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--end navbar -->
<div id="main">
<div id="content">
Content of the website goes here
</div><!--end content-->
<div id="sidebar">
</div><!--end sidebar-->
</div><!--end main-->
</div>
<div id="footer">
Footer content is placed here
</div>
</body>
</html>Now, I am working on another page where I need the content to extend the footer beyond the bottom of the browser, but I can't seem to get it right. I am considering using two different CSS stylesheets, one for the main page and one for the rest of the website. What are your thoughts on this?
Thank you.