CODEWITHSUNDEEP
htmlcss
Yehia Nada
Yehia Nada

Reputation: 17

CSS height 100% of its parent

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.

Upvotes: 0

Views: 328

Answers (3)

dereli
dereli

Reputation: 1864

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/

Upvotes: 1

Sébastien
Sébastien

Reputation: 12139

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;  
}

Upvotes: 2

Wex
Wex

Reputation: 15715

You cannot extend a child to be 100% the height of its parent, but you can make it look like it extends using the Faux Columns technique.

Upvotes: 1

Related Questions