html - 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{
      ????
}

Answer 1

如果您指定height: 100%;它将采用父级的高度。

如果您的孩子有填充物，您需要更改它的盒子大小。

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

如果您的孩子比父母拥有更多的内容，您需要告诉它滚动或隐藏。请注意，在某些浏览器上，滚动条将位于 div 内部，而在其他浏览器上，它将位于外部。

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

或者

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

全部演示

Answer 2

在您的 CSS 中，您可以将 child-div 设置为：

.child-div{
    height:100%;
}

这是一个演示：http: //jsfiddle.net/Xq7zQ/