html - CSS - 分区高度

Question

我在 child-div 和它的 parent-div 之间有一点差距。 child-div 是否有可能达到其 parent-div 的高度？或者(解决方法)如果父 div 可以限定其子 div 的高度范围，以免重叠或获得一些额外的空间。

我有一个像这样的 DOM:

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

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

</div>

这是我的 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 有填充，您需要更改其 box-sizing。

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

如果你的 child 比 parent 有更多的内容，你要么需要告诉它滚动，要么隐藏。请注意，在某些浏览器上，滚动条将在 div 内部，而在其他浏览器上，它将在外部。

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

或

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

Demo of All