使div高度等于其父级（100％）

Question

I have a main div that contains two other divs. I need that the first one must have the same height of the parent div. The parent div height is not specified in CSS.

Here's an example: http://jsfiddle.net/x8dhnh4L/ The pink div must expand to the full height of the parent (red border).

One solution I tried is using display:flex , but it's not IE-friendly (I need a IE8+ compatibility). Plus I'd like to achieve this with CSS only, so I'm avoiding JS.

Answer 1

You could try using a table layout:

• set display:table on the parent

• set display:table-cell to the childs that need the same height

   #container { position: relative; width:600px; border: 1px solid red; display:table; } #content { display: table-cell; background-color:pink; width:400px; } #side-bar { display:table-cell; background-color:yellow; width:170px; padding-left:25px; vertical-align: top; } 

here's a working fiddle: http://jsfiddle.net/x8dhnh4L/2/

As noted in the comments, margins do not work in elements with display:table-cell . If acceptable, you can use padding-left instead of margin-left ... You could also add an additional <div> to separate the 2 columns by 25px.

Answer 2

http://jsfiddle.net/x8dhnh4L/1/

Set side bar to

float:right;

and set content

height:100%;

Answer 3

A quick solution is to use display:table for #container and height:100% for #content .

http://jsfiddle.net/afelixj/x8dhnh4L/5/

Answer 4

If you actually want the "#content" div to expand to "#container" height, you need to set a height for parent div "#container" and height and float for "#content"

#container {
    position: relative;
    width:600px;
    border: 1px solid red;
    height: 800px; //whatever height you need
}

#content {
    display: inline-block;
    background-color:pink;
    width:400px;
    height:100%;
    float: left;
}

This way "#content" height will adjust to "#container" height, but "#side-bar" will take the height it needs to show it's content.

With Hanoncs solution the parent div "#container" will adjust to child's div "#content" height.

Answer 5

An easy way around this is using display: table; declaration on the parent element and display: table-cell; declaration on the child element.

I would recommend reading Equal Height Columns with Cross-Browser CSS and No Hacks .

Hope this helps!