Force DIV to fill browser height

I'm building a new site design in CSS and have come across a very aggravating issue on this page:

http://www.faithchurch.net/newsite/content.php

In the event that the content on a page does not fill the browser height, I would like the white area (#maincontent) to fill the rest of the browser.  I can't seem to get the min-height property to work.

Any suggestions would be greatly appreciated.  I'm looking for something that works in Firefox and IE.  The associated CSS file is here:

http://www.faithchurch.net/newsite/master.css

I've poured over many tutorials already and they do not account for my site design.
ryoxthimerAsked:
Who is Participating?
 
masterpassCommented:
In that case, make use of this JS
<script>
var Height = document.all ? document.body.clientHeight : window.innerHeight
document.getElementById('maincontent').style.height = Height + 'px';
</script>

Open in new window

0
 
xberryCommented:
I found something for you quick:

http://bonrouge.com/2c-hf-fixed.php

read through the description, as you'll be confirmed there, min-height does not work for the IE browsers, but try the
workaround with the 'height: 100%' property.  

In the example given you'd only need to use code without the footer and it would be usable for your purpose.
0
 
masterpassCommented:
In the master. css

modify
#headercontent, #main, #fakemain {
margin-left:auto;
margin-right:auto;
width:940px;
}

TO

#headercontent, #main, #fakemain {
margin-left:auto;
margin-right:auto;
}
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
ryoxthimerAuthor Commented:
xberry - I tried that.  I cant seem to get that to work with my design.  Maybe I'm not understanding what is different.  I have similar DIV's that serve essentially the same function as those in the example but its not behaving the same when I set the properties of height to match.

masterpass - What you suggested changes the width.  I'm interested in filling the HEIGHT.
0
 
masterpassCommented:
Try like this ... I tried and it worked...
#maincontent {
background-color:#FFFFFF;
height:100%;
padding:0 30px 25px;
min-height:475px;
}

Open in new window

0
 
ryoxthimerAuthor Commented:
masterpass - I replaced my #maincontent with yours and its not filling the broswer height.  I've attached what your CSS gives me in Firefox.  Your min-height is set to a specific length, which might be fine if everyone in the world had the same screen resolution.  I need it to fill the height no matter who is viewing it... In other words, visitors with different screen resolutions require a different fill height.

I can get slightly closer to what I want by changing the #container DIV to use height instead of min-height, but then just the semi-transparent block behind the white area fills, but not the white area still stays shorter.  I need both to fill.
ScreenShot.jpg
0
 
ryoxthimerAuthor Commented:
masterpass - It appears the JS did it!  Thanks!
0
 
ryoxthimerAuthor Commented:
Maybe I spoke too soon... Now if the content is longer than the browser window, the white area does not expand to fill that content.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.