How to make div 100% high relative to parent?

Question

How to make div 100% high relative to parent?

I am stuck with something like below. I need to make the right height of the div 100% (its bgcolor will cover the entire height of the 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: http://marioosh.net/lay1.html

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

+5

html

marioosh Jan 21 '11 at 8:45

source share

2 answers

georgebrock · Answer 1 · 2012-02-05T20:26:16+0000

Perhaps I misunderstand the question (your link to a desktop example does not work), but it looks like you are trying to create two columns with equal height. There are several methods you can use, here are three of them:

You can give everyone a DIVlarge lower complement and no less large, but negative lower margin.
```
#main {
    overflow: hidden;
}
#left, #right {
    float: left;
    padding-bottom: 1000em;
    margin-bottom: -1000em;
}
```
; (, id=foo, mypage.html#foo), . , .
: http://natbat.net/code/clientside/css/equalColumnsDemo/10.html

, - .

#left, #right {
    float: left;
}
#left {
    background: red;
    width: 200px;
    margin-right: -200px;
}
#right {
    border-left: 200px solid red;
}

Smashing Magazine: http://coding.smashingmagazine.com/2010/11/08/equal-height-columns-using-borders-and-negative-margins-with-css/

, #main , . " " , .
A List Apart: http://www.alistapart.com/articles/fauxcolumns/

, . , TABLE HTML-.

James Lelyveld · Answer 2 · 2011-01-21T08:51:02+0000

, 100%. 100%, ,

How to make div 100% high relative to parent?

More articles: