带有百分比的 css 位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18331716/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css position with percent
提问by Hansinger
I have a problem with position divs relative in an other div.
我在另一个 div 中相对位置 div 有问题。
I want to make a div that is position in the horizontal middle of the screen and in this div I want to place 3 other div with the same height. But all of them should be responsive.
我想制作一个位于屏幕水平中间的 div，在这个 div 中，我想放置 3 个其他具有相同高度的 div。但所有这些都应该是响应式的。
A picture says more than words :)
图片胜过千言万语:)
<div id="zwrapper">
<div id="z1" class="row"></div>
<div id="z2" class="row"></div>
<div id="z3" class="row"></div>
</div>
The blu element is the HTML
blue 元素是 HTML
html{
background: steelblue;
height: 100%;
width: 100%;
top:0; left:0; bottom: 0; right:0;
}
The lime one ist that div (#zwrapper)where I want to add the three red divs.
石灰是(#zwrapper)我想添加三个红色 div 的那个 div。
#zwrapper{
height: 81%;
top: 10%;
width: 100%;
left: 0;
position: absolute;
background: lime;
}
The red divs make problems. All divs have a height of 30%. The first one should be aligned to top and the third to bottom. The middle div with the id #z2is the only one which get a margin of 5%.
红色 div 会产生问题。所有 div 的高度均为 30%。第一个应与顶部对齐，第三个应与底部对齐。带有 id 的中间 div#z2是唯一一个边距为5%.
.row{
position: relative;
width: 80%;
background: red;
height: 30%;
}
#z2{
margin: 5% 0;
}
My idea was to put the 3 divs with a height of 30% into the wrapper and give the middle one a margin (top / bottom) of 5% so I get a height of 100%. But this does not work.
我的想法是将高度为 30% 的 3 个 div 放入包装器中，并给中间一个 5% 的边距（顶部/底部），这样我的高度为 100%。但这不起作用。
If I resize the window in width, the height of the red divs changes though I don't change the height.
如果我调整窗口的宽度，红色 div 的高度会改变，但我不会改变高度。
I make a fiddle to demonstrate this. http://jsfiddle.net/ELPJM/
我做了一个小提琴来证明这一点。http://jsfiddle.net/ELPJM/
Thanks in advance
提前致谢
回答by Ben Lee
The problem is that percent values in marginare always relative to width, not height. You can achieve this by using absolute positioning instead, and setting a "top" value on each row. Like this:
问题是百分比值margin总是相对于宽度，而不是高度。您可以通过使用绝对定位来实现这一点，并在每一行上设置一个“顶部”值。像这样：
.row {
position: absolute;
width: 80%;
background: red;
height: 30%;
}
#z1 {
top: 0%;
}
#z2 {
top: 35%;
}
#z3 {
top: 70%;
}
回答by Razz
It's your margin: 5% 0;that makes the height change. I'm not sure what margin-top and -bottom measures its percentage from but its not from the same as the parent element height.
Therefore you cant use it to count it towards 100% height.
是你margin: 5% 0;改变了高度。我不确定 margin-top 和 -bottom 是什么来衡量它的百分比，但它与父元素高度不同。因此你不能用它来计算 100% 的高度。
try this instead:
试试这个：
<div id="zwrapper">
<div id="z1" class="row"></div>
<div class="spacing"></div>
<div id="z2" class="row"></div>
<div class="spacing"></div>
<div id="z3" class="row"></div>
</div>
with the styling:
与样式：
.spacing{ height: 5%; }
回答by Anon
HTML
HTML
<div id="zwrapper">
<div class="holder">
<div id="z1" class="row"></div>
<div id="z2" class="row"></div>
<div id="z3" class="row"></div>
</div>
</div>
CSS
CSS
html,body{height: 100%;}
#zwrapper{min-height: 100%;}
#zwrapper:after{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
width: 1px;
}
#zwrapper.holder{
display: inline-block;
vertical-align: middle;
}
回答by AdityaSaxena
This should solve it
这应该解决它
.row{
position: relative;
width: 80%;
margin:0 auto;
background: red;
height: 30%;
}
#z2{
margin: 5% auto;
}
