如何在垂直响应时防止子div与父div之间的边距
我是HTML和CSS的新手,请耐心等待。我正在尝试创建一个响应式网格,其中父div中包含4个子div。如果子div之间没有空白,则可以垂直和水平调整浏览器的大小。但是,当我开始在子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>
希望我的问题是有道理的 - 如果不是,那么请让我知道。 任何帮助将不胜感激。 谢谢
的百分比像ckuijjer说,垂直值是相对于一个选项宽度而不是高度。
解决方案之一就是使用calc。
.container div {
height: calc(25% - 21px);
width: 80%;
margin: 0 auto 28px;
background: #f00;
}
另一个解决方案是将元素与flexbox平等对齐。 [看笔在这里](http://codepen.io/matuzo/pen/pvgNgj?editors=110) 。容器{ 宽度:70%; 身高:100%; background:#fff; margin:0 auto 40px; display:flex;柔性方向:列; justify-content:space-between; } 但是[浏览器支持](http://caniuse.com/#search=flexbox)... – matuzo 2014-12-06 13:55:15
感谢这个信息matuzo - 我最终采用了calc方法。我设法添加更多的子div,并注意到我必须调整px值,但它的工作。再次感谢。 – 2014-12-06 23:26:40
太棒了,很高兴我能帮上忙。只是为了澄清:我们从每个元素中减去21px,但我们只希望3个元素在它们下面有空间。所以我们将最后一个元素的21px平均分配到前三个元素(21px + 21px/3 = 28px) – matuzo 2014-12-07 05:36:20
margin-top
和margin-bottom
的百分比是基于宽度而不是高度。见Why are margin/padding percentages in CSS always calculated against width?
讨论这可能是采取看看vh
单元,让您的大小设置为视口高度
感谢您的反馈ckuijjer - 我不知道这样的边缘表现这样非常有帮助 - 再次感谢。 – 2014-12-06 23:29:02
请提供jsfiddle - 让我们更容易理解您的问题。 – pie6k 2014-12-06 11:12:12