inner div needs to be 100% height

Question

Here is my HTML:

<div id="container">
    <div id="left-container">
    </div>

    <div id="right-container">
    </div>
</div>

The container is 100% height (I checked it with Firebug). But the #left_container needs to be 100% too and it isn't!

Below is my CSS and a screenshot. The yellow should be 100%. Yellow is the background of the #left-container

html, body {
    height: 100%;
}
#container {
    position:relative;
    margin: 0 auto;
    width: 100%;
    height:100%;
    height: auto !important;
    min-height:100%;
    background: #fff;
}
#left-container {
    width: 300px;
    background: #ff0;
    height:100%;
    height: auto !important;
    min-height:100%;
}

score 7 · Accepted Answer · edited May 23 '17 at 11:54

7

This article discusses both the issue and solution in detail:

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

This might help too:

<style>
    #outer {position:absolute; height:auto; width:200px; border: 1px solid red; }
    #inner {position:absolute; height:100%; width:20px; border:1px solid black; }
</style>

<div id='outer'>
    <div id='inner'>
    </div>
    text
</div>

See here for more details on the above:
How to make a floated div 100% height of its parent?

edited May 23 '17 at 11:54

Community

1
1

answered Oct 21 '11 at 17:11

James Johnson

45,496
8
73
110

1

My eye is twitching over your use of single quotes in your HTML... except it might just be me winking in approval over how you subtly added a single space in the #outer css so that the two lines are the exact same width. I'm so torn. – Blair Connolly Jun 22 '17 at 19:20

score 0 · Answer 2 · answered Mar 27 '22 at 06:41

0

   
<style>
    #outer-container {
        height:200vh;
        width:100%;
         position:relative;
        background-color:orange;
    }
    #left-container{
        position:absolute;
       width:100%;
       height:100%;
        background-color:blue;
    }
</style>

<body>

    <div id="outer-container">
        <div id="left-container">
        </div>
    </div>

</body>

answered Mar 27 '22 at 06:41

asbupsilon

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 27 '22 at 09:10

score 0 · Answer 3 · answered Oct 21 '11 at 18:15

The best way to approach this problem is to think outside the box a little. There's no reason that both containers need to stretch to 100% if you're just concerned about the background stretching for both of them. There's a really simple technique called Faux Columns in which you combine the backgrounds for both sidebars into one single background image, and set the main container's background to that image. When a longer sidebar stretches the main container, it brings down the background for both sidebars.

score -3 · Answer 4 · answered Oct 21 '11 at 17:09

-3

You should be able to use just

margin:0;
padding:0;
height:100%;

For the conatainers to get what you want.

answered Oct 21 '11 at 17:09

Matt H

6,422
2
28
32

inner div needs to be 100% height

4 Answers4