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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

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
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.