CSS vertical height adjust based on content, not window

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 {
      position:relative;
                    margin: 0 auto; /* This centers the container */
                    width: 760px;
                    font: Arial, Helvetica, sans-serif;
                    cursor:default;
                    background-image:url(../images/back.gif);
                    padding: 10px 15px 0 15px;
      overflow:visible;
      height:100%;
}
LVL 1
Jeff GeiselmanAsked:
Who is Participating?
 
oceanbeachConnect With a Mentor Commented:
Hi baldwin_it,

What about trying...

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

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

-OB

0
 
oceanbeachCommented:
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!

oceanbeach
0
 
Jeff GeiselmanAuthor Commented:
yeah I set min-height to 100% and then height to auto...no luck
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.