html - 垂直响应时如何防止子 div 与父 div 重叠的边距

Question

我是 HTML 和 CSS 的新手，所以请多多包涵。我正在尝试创建一个响应式网格，其中父 div 包含 4 个子 div。当子 div 之间没有边距时，在垂直和水平方向上调整浏览器大小会成功。但是，当我开始在子 div 之间创建边距时，垂直调整浏览器的大小会导致底部子 div 与父 div 重叠——这是我不希望的。

我尝试使用 overlap: hidden 属性，但这会导致底部子 div 在浏览器垂直变化时被隐藏(截断)——同样，我不希望出现这种情况。

我想要的是子 div 具有相等的边距，当我垂直更改浏览器时，子 div 包含在父 div 中，而不管浏览器的垂直尺寸如何。

这是我的代码:

html {
  width: 100%;
  height: 100%;
}
body {
  width: 70%;
  height: 100%;
  background-color: black;
  margin: 0 auto;
}
#div_container {
  width: 100%;
  height: 100%;
  background-color: white;
}
#div1 {
  width: 94%;
  height: 24%;
  background-color: green;
  margin: 0% auto 1% auto;
}
#div2 {
  width: 94%;
  height: 25%;
  background-color: yellow;
  margin: 0% auto 1% auto;
}
#div3 {
  width: 94%;
  height: 25%;
  background-color: blue;
  margin: 0% auto 1% auto;
}
#div4 {
  width: 94%;
  height: 25%;
  background-color: red;
  margin: 0% auto 1% auto;
}

<div id="div_container">
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
  <div id="div4"></div>
</div>

希望我的问题有道理 - 如果没有，请告诉我。任何帮助将不胜感激。谢谢

Answer 1

正如 ckuijjer 所说，垂直值是相对于宽度而不是高度。

一种解决方案是使用 calc。

.container div {
  height: calc(25% - 21px);
  width: 80%;
  margin: 0 auto 28px;
  background: #f00;
}

Here is an example on codepen .但是 browser support不是很好。