CSS, make inner div take the entire hight

Posted on 2008-11-18
Last Modified: 2013-11-19
I have relatively new to div only design and was wondering how I can setup my css to have the inner div take the entire height the screen. I have the following basic div structure
<div class="wrapper">
<div id="header">.....
<div id="content>....
<div id="footer">......

My content does not have a height specified and has the following css property:

#content {
      margin: 0 auto; /*to bring it to the center of the page */
      background:  url(images/img10.gif) repeat-y;

However, when I expand my page in the browser the gradient or image with repeat-y doesn't come all th way down to up to the footer in safari and in IE it continues all the way dows to the footer. take a look at the attached image and see the inner gradient doesn't go all the way down when I expand my page.

Question by:ucsdmbdm
    LVL 15

    Expert Comment

    I think this link has what you are looking for.
    LVL 2

    Expert Comment

    Without seeing the rest of your css, I'm geussing you have'nt floated anything, if you did the footer would sit just under the content, without the huge gap.

    Make sure you use floats. The only way to make your content fill the entire page is to either fill it with contnent, or set a height. After all how does it now how much of your bg to repeat withouth a height set n your container.

    Add flost left to all your classes except your class with the margin auto.  You will see how it is supposed to look and you can work from there, get the css correct first.
    LVL 44

    Accepted Solution

    For the inner DIV to take the entire height, you have to make all the container DIVs to the entire height.  SO you start at the top and work down --

    HTML, BODY  { height:100%; min-height:100% }

    DIV.main  { height:100%; min-height:100% }

    DIV.inner  { height:100%; min-height:100% }

    Now your inner DIV can do it, as long as the HTML, BODY and main page DIV also has this property.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Highfive + Dolby Voice = No More Audio Complaints!

    Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

    Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
    HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

    779 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

    13 Experts available now in Live!

    Get 1:1 Help Now