垂直响应时如何防止子div之间的边距与父div重叠答案

【问题标题】：How to prevent margins between child divs overlapping parent div when vertically responsive垂直响应时如何防止子div之间的边距与父div重叠
【发布时间】：2021-11-30 18:52:54
【问题描述】：

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

我尝试使用重叠：隐藏属性，但是当浏览器垂直更改时，这会导致底部子 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>

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

【问题讨论】：

请提供 jsfiddle - 我们会更容易理解您的问题。

标签： html css

【解决方案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 不是很好。

【讨论】：

另一种解决方案是将元素与 flexbox 对齐。 See the pen here .container { 宽度：70%;高度：100%；背景：#fff;边距：0 自动 40 像素；显示：弯曲；弹性方向：列； justify-content: 之间的空格；但是再次browser support...
感谢 matuzo 提供的这些信息 - 我最终采用了 calc 方法。我设法添加了更多子 div，并注意到我必须调整 px 值，但它起作用了。再次感谢。
太好了，很高兴我能帮上忙。只是为了澄清：我们从每个元素中减去 21px，但我们只希望 3 个元素在它们下方有空间。所以我们将最后一个元素的21px平均分割在前三个元素上（21px + 21px/3 = 28px）

【解决方案2】：

margin-top 和 margin-bottom 的百分比基于宽度而不是高度。查看Why are margin/padding percentages in CSS always calculated against width?中的讨论

查看vh 单元可能是一个选项，它允许您将大小设置为视口高度的百分比

【讨论】：

感谢 ckuijjer 的反馈 - 我不知道页边距以这种方式表现，所以非常有帮助 - 再次感谢。