Html 将 div 设置为父 div 的 50% 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22104839/
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
Set div 50% height of parent div
提问by
I want the child div to be a 50% height of the parent, so if the parent div was 100%, the child div would be 50%, if the parent div was 1000px, the child div would still be 50%.
我希望子div是父div的50%，所以如果父div是100%，子div就是50%，如果父div是1000px，子div仍然是50%。
Here's a basic fiddle of what i've done so far http://jsfiddle.net/6PA6k/17/
这是我到目前为止所做的基本操作http://jsfiddle.net/6PA6k/17/
Here's the html
这是 html
<div class="wrapper">
<div class="button-container">
<div class="button"></div
</div>
</div>
Here's the css
这是css
* {
margin:0;
padding:0;
}
html {
height:100%;
width:100%;
}
body {
height:100%;
width:100%;
}
.wrapper {
height:100%;
width:100%;
background:red;
}
.button-container {
height:100%;
width:50px;
}
.button {
width:50px;
height:50px;
background:blue;
}
采纳答案by Ason
UPDATED
更新
Demo: http://jsfiddle.net/6PA6k/22/
演示：http: //jsfiddle.net/6PA6k/22/
* {
margin:0;
padding:0;
}
html {
height:100%;
width:100%;
}
body {
height:100%;
width:100%;
}
.wrapper {
position: relative;
height:80%;
width:100%;
background:red;
}
.button-container {
position: relative;
height:50%;
width:300px;
background:blue;
}
.button {
position: absolute;
top: 50%;
height:50px;
width:50px;
background:yellow;
margin-top: -25px;
}
回答by Dryden Long
I may be confused about what you are asking, but changing:
我可能对您要问的内容感到困惑，但正在更改：
.button {
width:50px;
height:50px;
background:blue;
}
To:
到：
.button {
width:50px;
height:50%;
background:blue;
}
Does what you seem to want... http://jsfiddle.net/c3eB8/
你似乎想要什么...... http://jsfiddle.net/c3eB8/
EDIT
编辑
Ok, so now that I understand the question better, in order to center the child div vertically with a parent div without fixed dimensions, you can use absolute positioning.
好的，现在我更好地理解了这个问题，为了将子 div 与没有固定尺寸的父 div 垂直居中，您可以使用绝对定位。
.button {
width:50px;
height:50px;
background:blue;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
Here is a fiddle: http://jsfiddle.net/8UjvB/
这是一个小提琴：http: //jsfiddle.net/8UjvB/
回答by helderdarocha
Maybe this: http://jsfiddle.net/helderdarocha/8p5MT/
也许这个：http: //jsfiddle.net/helderdarocha/8p5MT/
It places the 50x50 button in the middle of the parent:
它将 50x50 按钮放置在父级的中间：
.button-container {
height:100%;
width:50px;
background: green;
position: relative;
}
.button {
width:50px;
height:50px;
background:blue;
margin: auto;
position: absolute;
top: 0; bottom: 0;
}
(add position:relativeto the parent, and margin:auto; position:absolute; top:0; bottom:0to the .buttonstatement)
（添加position:relative到父，并margin:auto; position:absolute; top:0; bottom:0在.button声明）
