CODEWITHSUNDEEP
htmlcssheight
aur0n
aur0n

Reputation: 473

Make div height equal to its parent (100%)

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.

Upvotes: 2

Views: 13895

Answers (6)

danday74
danday74

Reputation: 57231

put:

display: grid;

on the parent - if it only has one child, the child will resize to the same size as the parent

Upvotes: 0

Jordan
Jordan

Reputation: 1121

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!

Upvotes: 0

achasinh
achasinh

Reputation: 570

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.

Upvotes: 0

Reinder Wit
Reinder Wit

Reputation: 6615

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.

Upvotes: 4

Felix A J
Felix A J

Reputation: 6490

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

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

Upvotes: 0

M H
M H

Reputation: 2183

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

Set side bar to 

float:right;

and set content 

height:100%;

Upvotes: 0

Related Questions