CSS height 100% of its parent

Question

i have this page: http://www.nyccriminallawyer.com/felonymisdemeanor/ what i want to do is make the left inner box (the white one with Felony/Misdemeanor as title called .in_left) to be of 100% height of its parent (called .inner)

codes are here:

.in_left {
float: left;
width: 721px;
margin-top: 10px;
font-family: 'Open Sans', sans-serif;
line-height: 24px;
background-color: white;
border-radius: 4px 4px 4px 4px;
box-shadow: 0px 0px 11px -4px #000;
}

.inner {
background: #CCD7CC;
margin-top: 1px;
color: #5A5A5A;
padding: 10px;
clear: both;
overflow: hidden;
}

i have tried height: 100% and min-height as well, but it doesn't work.

Answer 1

Don't use float on .in_left and .in_right , use display:table-cell; on those and, most importantly, use display:table; on their container:

.inner {  
    display: table;  
}  
.in_left {
    width: 229px;
    /* other style */
    display: table-cell;  
}  
.in_left {
    width: 721px;
    /* other style */
    display: table-cell;  
} 

Answer 2

您不能将子级的高度扩展到其父级的高度的100％，但是可以使用仿列技术使其看起来像其父级。

Answer 3

Setting the height of an element 100% only works if the parent elements height is somehow fixed (like height: 300px). But you can set the child element absolutely positioned (to its immediate parent) and set it's position in four directions:

.in_left {
  ...
  position: relative;
}

.inner {
  ...
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

Demo here: http://jsbin.com/OkIQUCi/1/