I've been working hard to implement the tips from a tutorial on keeping the footer at the bottom of the page, especially when there isn't much content. The link to the tutorial can be found here:
Despite following all the guidelines and properties as laid out in the tutorial, I'm still struggling to get the footer to stay at the bottom of the page.
Upon inspecting the page using firebug, it's evident that the HTML and body have a height set at 100%; however, even after applying "min-height: 100%;" to #wrapper, it's not extending to fill 100% of the window.
The essential sections of CSS are provided below, but for the complete source code, you can access it live here:
html {
padding: 0;
margin: 0;
height: 100%;
}
body {
width: 100%;
height: auto;
min-height: 100%;
padding: 0;
margin: 0;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
background-color: #E9E9E9;
}
#wrapper {
width: 100%;
height: 100%;
position: relative;
}
#headerWrap {
width: 100%;
height: 120px;
min-width: 600px;
padding-bottom: 1px;
background: url("images/bg-header.png") repeat-x scroll left bottom #FFFFFF;
}
#content {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
min-width: 600px;
max-width: 900px;
margin: 0 auto 0 auto;
padding: 0px 25px 80px 25px;
}
#footerWrap {
clear: both;
width: 100%;
height: 80px;
min-width: 600px;
background-color: #231F20;
box-shadow: 0px 0px 10px 0px #231F20;
position: absolute;
bottom: 0;
}
Your assistance is greatly appreciated!