How to make div 100% height relative to parent?

Question

I stuck with something like below. I need to make right-top div 100% height (its bgcolor will cover full height of main div).

<body>
    <div id="main" style="width: 800px; margin: auto; text-align: left; border: 1px solid #628221; padding: 2px; background-color: #fff;">
        <div id="left" style="float: left; width: 600px; background-color: #A7C864;">
            <div id="left-top">left-top</div>
            <div id="left-bottom">left-bottom</div>
        </div>
        <div id="right" style="float: right; width: 200px; background-color: #C7E48E;">
            <div id="right-top">right-top</div>
        </div>
        <div style="clear: both;"></div>
    </div>
</body>

Working example here: http://marioosh.net/lay1.html

Using table it is easy: http://marioosh.net/lay2.html

Even attempting this suggests that you may not understand what div's are all about. If you want to do that use table, not div's. If you set div main's height to div left's height, then you can put div right 100%, but thats sort of silly because you can obviously then sent div's right height. — Myforwik, Jan 21 '11 at 09:00
check these out. I am sure they will help. [question1](http://stackoverflow.com/questions/1122381/how-to-force-child-div-to-100-of-parents-div-without-specifying-parents-height) [question2](http://stackoverflow.com/questions/485827/css-100-height-with-padding-margin) — ayush, Jan 21 '11 at 08:50

score 5 · Answer 1 · answered Feb 05 '12 at 20:26

I may be misunderstanding the question (your link to the table-based example isn't working), but it sounds like you're trying to create two columns with equal height. There are several techniques you can use, here are three of them:

You can give each DIV a large bottom padding, and an equally large, but negative, bottom margin.
```
#main {
    overflow: hidden;
}
#left, #right {
    float: left;
    padding-bottom: 1000em;
    margin-bottom: -1000em;
}
```
This solution is not without it's problems; if you attempt to link to an element in one of the columns (e.g. you have an element in one of the columns with id=foo and you link to mypage.html#foo) then the layout will break. It's also hard to add bottom borders using this technique.

Full example from Natalie Downe: http://natbat.net/code/clientside/css/equalColumnsDemo/10.html
You can give one of the columns a negative right margin, and the other a very wide left border.
```
#left, #right {
    float: left;
}
#left {
    background: red;
    width: 200px;
    margin-right: -200px;
}
#right {
    border-left: 200px solid red;
}
```
More information on Smashing Magazine: http://coding.smashingmagazine.com/2010/11/08/equal-height-columns-using-borders-and-negative-margins-with-css/
You can fake it by giving #main a background image that includes the background for both columns. This technique is known as “Faux Columns” and is useful when you want complex backgrounds, or a decorative border between the columns.

More information on A List Apart: http://www.alistapart.com/articles/fauxcolumns/

As one commenter on the question noted, you can also use a table. However, unless you're displaying tabular data TABLE is not the appropriate HTML element.

So all these padding/margin hacks with divs to poorly emulate something that we have been doing for over 15 years using tables is the "appropriate" HTML element? Odd... — bfritz, Jun 19 '13 at 23:13

score -2 · Answer 2 · answered Jan 21 '11 at 08:51

-2

You need to set heights of the parent elements to enable height of 100%. If you set both to height 100% you should get the effect you're looking for

answered Jan 21 '11 at 08:51

James Lelyveld

294
1
3
11

i don't need that main div have 100% height – marioosh Jan 21 '11 at 09:05

How to make div 100% height relative to parent?

2 Answers2

Linked