Div height 100% within div

Question

I got the followin code, which doesn't do the trick:

<div id="wrap">
    <div class="navigation">    
        <ul>      
            <li>
            </li>
        </ul>
     </div>


     <div id="main">
       Content
     </div>
</div>

I want the wrap to be 100% height. This works just fine. But as soon as i try the #main div to be 100% heights as well, it doesn't. This div always collapses to the height of content.

html{height:100%;}
body{overflow-y:scroll; margin:0px; padding:0px; height:100%;}
#wrap{
    min-height: 100%; /* Mindesthöhe für moderne Browser */
    height:auto !important; /* Important Regel für moderne Browser */ 
    height:100%; /* Mindesthöhe für den IE */ 
    width:100%;
    position:absolute;
    overflow:hidden;
}


#main{
    width: 980px !important;


    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
    height:auto !important;


}

Can somebody please help me solve this problem? Thanks in Advance

You are setting the height of #main to 100% of height:auto, which doesn't exist. — showdev, Feb 05 '13 at 18:24
Please give us a bit more information about the effect you're trying to achieve. Maybe we can help with an alternate solution. Are you trying to have #main fill the rest of the page below the navigation? — showdev, Feb 05 '13 at 18:26
@showdev i would do it on an alternative way, but the problem is that the navigation with has to be 100%; the content with is only allowed to be 980px. — Jimmy Tschonga, Feb 05 '13 at 18:30
@showdev yes, i want the #main element to fill the rest of the page. It shall be centered by #main {width: 980px; margin: 0 auto; background:red;} — Jimmy Tschonga, Feb 05 '13 at 18:31
Possible solutions: [here](http://stackoverflow.com/questions/2898221/make-div-fill-remainder-of-page-vertically) and [here](http://stackoverflow.com/questions/4453278/fixed-div-on-top-div-that-fills-rest-of-page-on-bottom-css) — showdev, Feb 05 '13 at 18:42

score 5 · Accepted Answer · edited Mar 08 '14 at 09:55

5

Change the style for wrap. Live Demo

#wrap {
    min-height: 100%; /* Minimum height for modern browsers */
    height:100%; /* Minimum height for IE */ 
    width:100%;
    position:absolute;
    overflow:hidden;
    border:1px solid blue;
}

edited Mar 08 '14 at 09:55

yprez

14,854
11
55
70

answered Feb 05 '13 at 18:36

ATOzTOA

34,814
22
96
117

thanks a lot. Leaving away the height:auto !important; did the trick ;) – Jimmy Tschonga Feb 05 '13 at 18:40
1

This does not work if the #main content is longer than the page. It gets truncated because the height is limited to 100%. [Example here](http://jsfiddle.net/PrH8S/2/). – showdev Feb 05 '13 at 18:41

showdev · Answer 2 · 2017-11-14T17:53:21.867

In your case, it doesn't seem that the #main div necessarily needs to expand to 100%. What needs to expand is the red background.

I suggest using a "faux background". Using position:fixed, you can add a red background that will not scroll with the page. The rest of the content can scroll over it. Something like this.

html,
body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
}

div#background {
  position: fixed;
  width: 100%;
  height: 100%;
}

div#background div#color {
  position: relative;
  background-color: red;
  width: 980px;
  height: 100%;
  margin: 0px auto;
}

div#nav {
  position: relative;
  background-color: #FFF;
}

div#main {
  position: relative;
  width: 950px;
  margin: 0px auto;
}

<div id="background">
  <div id="color"></div>
</div>

<div id="nav">NAVIGATION<br />even two lines<br /> or more</div>

<div id="main">
  <p>CONTENT GOES HERE</p>
</div>

Downvoters: Please explain your votes. It helps to improve answers. — showdev, Dec 16 '13 at 17:14

Div height 100% within div

2 Answers2