100% height div not working [Archive]

View Full Version : 100% height div not working

springtime

05-25-2008, 04:28 AM

I've simplified what I was trying to do earlier with my previous question. I now have a more straightforward layout with a footer that is positioned at the bottom of the browser window, thanks to this method: http://www.themaninblue.com/writing/perspective/2005/08/29/
If the page content is longer than the browser window, the footer moves with it. That's all good.

I have one small outstanding problem. If the content of my "content" div is shorter than the browser window, I still need that div's bgcolor to extend down to the top of the footer. Right now, the div ends with its content. What am I doing wrong? In this case, how can I make the white color of the "content" div extend all the way down to the footer, even if that portion is empty of content? I know there has to be an easy fix to this... thank you in advance, for any tips!!!

Here's the code:

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

</style>

</head>

<body>
<div id="nonFooter">
<div id="topsection"></div>

<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas lobortis nulla eu metus. Aenean vel erat eu mi tristique accumsan. Cras massa. Sed ut dolor. Donec hendrerit dui eu odio pellentesque aliquet. Fusce adipiscing. Pellentesque odio augue, tincidunt a, congue sit amet, tempor eget, massa. Donec quis nibh id magna porta fermentum. Vivamus eu nisi ac velit viverra pulvinar. Donec cursus, felis id mattis condimentum, sem nisi pharetra metus, tempor sodales nunc leo eu neque. Fusce felis neque, volutpat eget, vehicula in, commodo ac, magna. Sed porttitor porttitor magna. Donec tempor felis sit amet felis.</p>
</div>
</div>
<div id="footer"> </div>
</body>
</html>

sandyk3

05-26-2008, 12:13 AM

Hi, You're not doing anything wrong. I struggled with that forever on one of my pages. read http://www.alistapart.com/articles/holygrail

I ended up using the javascript for equal columns - substitute your div names for mine in the code - i hope it's bold

//** Dynamic Drive Equal Columns Height script v1.01 (Nov 2nd, 06)
//** http://www.dynamicdrive.com/style/blog/entry/css-equal-columns-height-script/

var ddequalcolumns=new Object()
//Input IDs (id attr) of columns to equalize. Script will check if each corresponding column actually exists:
ddequalcolumns.columnswatch=["navBar", "content", "headlines"]

ddequalcolumns.setHeights=function(reset){
var tallest=0
var resetit=(typeof reset=="string")? true : false
for (var i=0; i<this.columnswatch.length; i++){
if (document.getElementById(this.columnswatch[i])!=null){
if (resetit)
document.getElementById(this.columnswatch[i]).style.height="auto"
if (document.getElementById(this.columnswatch[i]).offsetHeight>tallest)
tallest=document.getElementById(this.columnswatch[i]).offsetHeight
}
}
if (tallest>0){
for (var i=0; i<this.columnswatch.length; i++){
if (document.getElementById(this.columnswatch[i])!=null)
document.getElementById(this.columnswatch[i]).style.height=tallest+"px"
}
}
}

ddequalcolumns.resetHeights=function(){
this.setHeights("reset")
}

ddequalcolumns.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
}

ddequalcolumns.dotask(window, function(){ddequalcolumns.setHeights()}, "load")
ddequalcolumns.dotask(window, function(){if (typeof ddequalcolumns.timer!="undefined") clearTimeout(ddequalcolumns.timer); ddequalcolumns.timer=setTimeout("ddequalcolumns.resetHeights()", 200)}, "resize")

Hope this helps!

Sandy K

springtime

05-26-2008, 01:24 AM

Do you worry at all about users who have javascript turned off? I am ready to say... forget it. Can't believe how frustrating this can be.

sandyk3

05-26-2008, 02:23 AM

I use to worry about it until I saw the stats from my host and 98% have java enabled. you can always mention that your site has java and where the user can get it.

I do understand where you are coming from regarding giving up. I think the 100% column thing was the hardest thing I've done. You will get through this. The holy grail works well too!!

Sandy K