Make div height equal to its parent (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.