My "main-section" div is designed to inherit its height from the parent div, known as the "wrapper." The wrapper div, in turn, takes its height from the body of the document. Both the HTML and body tags are set with a height of 100%.
To implement the CSS "sticky footer" technique (found at ), I need to set the padding-bottom property in the main-section div to match the height of the footer div, which needs to be placed outside of the wrapper div. Additionally, the footer div requires a negative margin-top value equal to its own height.
While this setup keeps the footer at the bottom of the page, my goal is to extend the main-section's background-color by 100% all the way down to the footer. Despite my efforts, the main-section ends up extending past the footer, causing the window to stretch beyond 100% in height when there isn't enough content to fill the page completely.
It appears that the issue may stem from the padding-bottom property in the main-section div conflicting with the clear: both and position: relative attributes in the footer. Alternatively, the min-height: 100% attribute in the wrapper could also be contributing to the problem.
Below is the relevant HTML code:
<div id="wrap">
<div id="header">
...
</div> <!-- end of header -->
<div id="main-section">
...
</div> <!-- end of main section -->
</div> <!-- end of wrapper -->
<div id="footer">
...
</div> <!-- end of footer -->
...and here is the corresponding CSS:
*
{
margin: 0px;
padding: 0px;
}
html, body
{
height: 100%;
}
body
{
background-color: #bbb;
}
#wrapper
{
/* wrapper 100% of screen */
min-height: 100%;
height: inherit;
width: 950px;
margin-left: auto;
margin-right: auto;
}
#header
{
background-color: #C97;
line-height: auto;
text-align: center;
font-family: "Lucida Console";
font-weight: bold;
font-size: 2.5em;
}
#main-section
{
background-color: #ddd;
height: inherit;
/* for a "sticky" footer */
padding-bottom: 50px; /* equal to the height of the footer */
}
#footer
{
clear: both;
position: relative;
height: 50px;
line-height: 50px;
margin-top: -50px; /* equal to the height of the footer, for a "sticky footer" */
width: 950px; /* equal to width of wrapper */
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: #C97;
}
EDIT: It is important to mention that I am testing this in Firefox.