CSS - div height

Question

I am getting a little gap between child-div and its parent-div. Is it possible for child-div to on its parent-div height? or (the way around)possible if the parent-div can scope the height of its child-div for not to overlap or get some extra spaces.

I have a DOM like this:

<div class="parent-div">
  <div class="parent-image">
  </div>

 <div class="child-div">
 </div>

</div>

here is my CSS:

.parent-image:{
  height:60px;
}
.parent-div{
    border: 1px solid #E3E3E3;
    border-radius: 4px 4px 4px 4px;
    margin-bottom: 20px;
    width: 100%;
}

.child-div{
      ????
}

This post might help - http://stackoverflow.com/questions/5474951/css-make-divs-inherit-a-height — hungerstar, Aug 08 '13 at 03:30
Make up a fiddle or online example that hows this in action, as your code doesn't demonstrate the issue. — ralph.m, Aug 08 '13 at 03:30
recreate the problem on a fiddle http://jsfiddle.net/ZMygK/ seems just fine to me... — Yusaf Khaliq, Aug 08 '13 at 03:30
I think the OP wants to try and inherit height without specifying it on the parent. Which I do not believe is possible. — hungerstar, Aug 08 '13 at 03:36

score 3 · Accepted Answer · answered Aug 08 '13 at 03:33

If you specify height: 100%; it will take the height of the parent.

If your child has padding, you need to change its box-sizing.

.child {
    padding: 10px;
    box-sizing: border-box;
}

If your child has more content than the parent, you either need to tell it to scroll, or hide. Note that on some browsers the scroll-bar will be inside the div, and on other browsers, it'll be on the outside.

.parent.c .child {
  overflow: auto;
}

or

.parent.d .child {
  overflow: hidden;
}

Demo of All

score 2 · Answer 2 · answered Aug 08 '13 at 03:32

2

In your CSS, you can set your child-div to:

.child-div{
    height:100%;
}

Here is a demonstration: http://jsfiddle.net/Xq7zQ/

answered Aug 08 '13 at 03:32

Ben

903
1
9
13

I believe a height has to be specified on the parent (`.parent-div`) for this to work. I belive the OP wants to inherit the parents height based on the content the parent contains. Or something like that. – hungerstar Aug 08 '13 at 03:34

CSS - div height

2 Answers2

Demo of All