子元素上的填充移动父元素 - CSS

Question

我正在建立一个全屏的画廊和

#cover {
  position: absolute;
  width: 500px;
  height: 500px;
  background: rgba(44, 69, 128, 0.65);
  z-index: 10;
}
.divHolder {
  background: #fff;
  color: #2c4580;
  position: relative;
  box-shadow: 2px 2px 2px #333;
  padding: 10px;
  margin: 20px 20px;
  overflow: auto;
  height: 100%;
}
.divHolder div:hover {
  border: 10px solid #000;
}
.divHolder div {
  width: 100px;
  height: 100px;
  background: black;
  padding: 10px;
  display: inline-block;
  cursor: pointer;
  border: 10px solid white;
}

<div id="cover">
  <div class="divHolder">
    <div>image</div>
    ...
    <div>image</div>
  </div>
</div>

输出：

如何将子div“divHolder”放入“holder”中。我总是不明白填充和边距如何与子 div 一起使用。

作为参考，我添加了代码jsfiddle

Answer 1

您可以只使用calc() 来计算.divHolder 的正确高度。由于您的保证金，.divHolder 超过了父容器，因为您将其设置为 height: 100%;。通过顶部和底部边距减少 100%，它应该适合：

height: calc(100% - 40px);

#cover {
  position: absolute;
  width: 500px;
  height: 500px;
  background: rgba(44, 69, 128, 0.65);
  z-index: 10;
}
.divHolder {
  background: #fff;
  color: #2c4580;
  position: relative;
  box-shadow: 2px 2px 2px #333;
  padding: 10px;
  margin: 20px 20px;
  overflow: auto;
  height: calc(100% - 40px);
  box-sizing: border-box;
}
.divHolder div:hover {
  border: 10px solid #000;
}
.divHolder div {
  width: 100px;
  height: 100px;
  background: black;
  padding: 10px;
  display: inline-block;
  cursor: pointer;
  border: 10px solid white;
}

<div id="cover">
  <div class="divHolder">
    <div>image</div>
    <div>image</div>
    <div>image</div>
    <div>image</div>
    <div>image</div>
    <div>image</div>
    <div>image</div>
    <div>image</div>
    <div>image</div>
    <div>image</div>
    <div>image</div>
    <div>image</div>
  </div>
</div>