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

Question

我是HTML和CSS的新手，请耐心等待。我正在尝试创建一个响应式网格，其中父div中包含4个子div。如果子div之间没有空白，则可以垂直和水平调整浏览器的大小。但是，当我开始在子div之间创建边距时，垂直调整浏览器的大小会导致底部子div与父div重叠 - 这是我不想要的。

我试过使用重叠：hidden属性，但是这会导致底部子div在浏览器垂直更改时被隐藏（截断） - 同样，我不想要这种行为。

我想要的是孩子divs具有相等的利润率，当我垂直更改浏览器时，子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不是很好。

Answer 2

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

讨论这可能是采取看看vh单元，让您的大小设置为视口高度