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

margin-top和margin-bottom的百分比取决于宽度而非高度。请参阅Why are margin/padding percentages in CSS always calculated against width?

中的讨论

可以选择查看vh单位，该单位允许您将大小设置为视口高度的百分比

Answer 2

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

一种解决方案是使用calc。

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

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

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

2 个答案: