stretching a DIV to fill remainer of screen?

On this page:

I have the "bottomarea" DIV containing the bottom of the white box and shadow. But on short pages, or if you have a tall monitor/resolution setting, it doesn't extend down to cover up the remainder of the white box background.

I put a black border around "bottomarea" to make it clear what I'm trying to extend. I thought if I added height: 100%; that would do it, but it does.

Thanks for your help!
Brad BansnerWeb DeveloperAsked:
Who is Participating?
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.

It's because you're using a position absolute for the left navigation.
The simplest fix would be to add a min-height to the .content div

Relpace your current class with the one below

div.content {
padding:18px 18px 0 222px;

Open in new window


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
Brad BansnerWeb DeveloperAuthor Commented:
OK, that helps. But there could still be huge differences in the height of a page, and also the user's monitor. If I make the min. height too small, the white box could show at the bottom. If its too tall, then there is a lot of extra blank space at the bottom. I guess living with the extra blank space is the preferable option, if there is no other way to say "100% height in the space"?
This white area is because of the body background
Of course there are other ways to fix this and make the footer stick to the bottom of the page, but as per what I've seen in the code it will require some extensive work on both HTML and CSS since you would have to change the structure, introduce some new divs and move some others such as the bottom links <p class="bottomlinks"> which falls outside of the <div class="bottomarea">

So if you just need a quick fix and only got couple of short pages, then living with the long blank space is the best for you at the moment
Brad BansnerWeb DeveloperAuthor Commented:
OK, thanks!
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

From novice to tech pro — start learning today.