Child div 100% height to parent auto height

By reading your comments on other solutions it is clear to me that only solution for you is to implement some JS into your code. This is not a problem, however.

http://jsfiddle.net/b7TuP/


Make the right div position:absolute; and make the parent div position:relative; and then height:100%; will work for the right div. Make sure you also adjust its x-position and width accordingly. In this example I gave it a left:50px to make sure it appears to the right of the left column.

JSFiddle http://jsfiddle.net/e9mvD/


You can use the table-cell value of the display property in this layout and remove the float like this:

.left, .right{
    display:table-cell;
}

live demo http://jsfiddle.net/C9Kmx/34/


You can accomplish this using flexbox and some creativity.

.container {
  display: flex;
  background: black;
  padding: 5px;
  width: 300px
}

.left {
  height: 200px;
  flex: 1 0 0px;
  background: blue;
}

.right {
  flex: 1 0 0px;
  overflow: auto;
  background: green;
}

.column {
  display: flex;
  flex-direction: column;
  width: 20%;
}
<div class="container">
  <div class="left"></div>
  <div class="column">
    <div class="right"></div>
  </div>
</div>

Tags:

Html

Css