CSS vertical height adjust based on content, not window

Posted on 2007-07-21
Medium Priority
Last Modified: 2012-08-14
I have a contentcontainer in my CSS Stylesheet that is set to 100% height that I need to work properly. It works and sets up the heigt as 100%, but if the window is shrunk, then the page scrolled down, it only fills 100% of the window, not my content. Any ideas? This is making my content overflow outside of the div, but I want the div to strecth vertically with the content.

Here is the container:

 #bodycontainer {
                    margin: 0 auto; /* This centers the container */
                    width: 760px;
                    font: Arial, Helvetica, sans-serif;
                    padding: 10px 15px 0 15px;
Question by:Jeff Geiselman
  • 2
LVL 12

Expert Comment

ID: 19539348
Hello baldwin_it,

I am not sure if this will work with your layout, but have you tried 'min-height: 100%'?

I hope this helps!


Author Comment

by:Jeff Geiselman
ID: 19539369
yeah I set min-height to 100% and then height to auto...no luck
LVL 12

Accepted Solution

oceanbeach earned 2000 total points
ID: 19539462
Hi baldwin_it,

What about trying...

 #bodycontainer {
height: 100%;
overflow: hidden; }

#content {
height: 100%;
overflow: auto; }



Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Strategic internal linking is often considered an SEO power technique, especially for content marketing. Do you need to hire an SEO agency to optimize you internal linking? No, this article will help you understand the basics of internal linking and…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Suggested Courses

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question