Footer DIV height 100% possible?

HTML & CSS
1

I’ve got a problem that is probably pretty common but I’m not finding any good ways to solve it. I have a fixed height footer on a page and when I view it in a standard browser it looks fine (see left image below). However when I view the site on a mobile device in a vertical orientation (or a standard browser with a very high screen resolution) I see the background of the page below the footer (see right image below).

Are there any easy ways to set a minimum height of the footer div, and also have it expand vertically in situations where the viewable area is larger?

2

The solution I always use for that is to make the footer background color the background color of the <body> element. That’s the super easy way. Anything else will be fiddly. If your content area relies on the current background color, then you’ll have to wrap it in a containing div with the gray background color.

3

You may try the following option
CSS Code:


<style>
html{
	height: 100%;
}
body
{
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color:#f6f6fe;
	height: 100%;
}
#wapper{
	width:930px;
	margin:0 auto;
	height: 100%;
}
#head{
	float:left;
	width:930px;
	height: 100%;
	border-left: 1px solid #98b4f0;
	border-right: 1px solid #98b4f0;
}

.header{
	float:left;
	width:930px;
	height: 100px;
	background-color:#98b4f0;
}
.body_content{
	float:left;
	width:930px;
}
.footer{
	position:absolute;
	bottom:0;
	width:930px;
	height: 60px;
	background-color:#98b4f0;
}
</style>

HTML Code:


<div id="wapper">
<div id="head">
	<div class="header">&nbsp;</div>
	<div class="body_content">&nbsp;</div>
	<div class="footer">&nbsp;</div>
</div>
</div>

Make sure your document type is something like:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
4

No you can’t do that I’m afraid as that would mean that your element can never grow further than the bottom of the viewport and will just spill out. You should use min-height:100% instead. See the css faq on 100% height for a full explanation.

It looks like a sticky footer would be more appropriate here: