Forums

cybershot

I am coding a layout right now and I am having trouble with the footer. My content is a fixed height and so I wanted my footer to be 100% of the remaining page. But when I added height: 100% to my footer, I found that it doesn't work. Does anyone know why and have a solution for this? I have a repeating background image that I need to fill the space and I don't want white space below my footer. That's why I need it to be 100%

TheDoc

I'm sure there is a better way, but this is all my brain can come up with right now. Works in Safari 4 and FF3, but undoubtedly fails in IE6 (untested):

<!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\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />
<title>Stupid Footer</title>
<style>
* {margin:0; padding:0;}

html, body { height:100%; background:blue; }

</style>
</head>

<body>

<div style=\"margin:0 auto; height:100%;\">
	
<div style=\"position:relative; height:300px; width:600px; margin:0 auto; background:red; color:white;\">Lorem</div>
    
    
    
    <div style=\"background:purple; height:100%; width:600px; margin: -300px auto 0; color:white;\">
    
    	<div style=\"padding-top:300px;\">asldjflsadfjkld</div>
    
    </div>

</div>

</body>
</html>

cybershot

well i read that the reason height: 100% doesn't usually work is because it needs a parent container with a height set. so the idea was to set the body to a height Of 100% then the footer would have a container to go off of, but it's not working for me.

TheDoc

If you read through what I provided, that's exactly what I did.

treehouse : what would you like to learn today?

Forums

css height property