Learn about creating sticky footers using this method and check out an example here.
* { margin:0; }
html, body { height:100%; }
#wrap {
min-height:100%;
height:auto !important;
height:100%;
margin:0 0 -47px;
}
#side { float:left; background:#ccc; width:100px; overflow:hidden; }
#body { float:left; background:#aaa; width:300px; }
#foot, .push { height:47px; }
#foot { background:#eee; }
Is there a way to make the sidebar or content box fill up the space between the header and footer?
Setting the height to 100% hasn't worked for me, and a fixed height isn't a viable solution. Any suggestions on how to achieve this?
EDIT: The solution provided in this article does not work for designs with semi-transparent footers. See an example here: http://jsfiddle.net/AfwzD/23/
Therefore, I would like to expand on the question. How can this technique be adapted for designs with semi-transparent footers?