html - 子元素上的填充移动父元素 - 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 放入 "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>