CSS vertical height adjust based on content, not window

Posted on 2007-07-21
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
    LVL 12

    Expert Comment

    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!

    LVL 1

    Author Comment

    by:Jeff Geiselman
    yeah I set min-height to 100% and then height to luck
    LVL 12

    Accepted Solution

    Hi baldwin_it,

    What about trying...

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

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



    Featured Post

    Highfive Gives IT Their Time Back

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Join & Write a Comment

    Suggested Solutions

    Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
    Read about why website design really matters in today's demanding market.
    In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

    728 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

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now