Question

我希望子div为父级的50％高度，所以如果父div为100％，则子div为50％，如果父div为1000px，则子div仍为50％

这是我到目前为止所做的基本事件http://jsfiddle.net/6PA6k/17/

这是html

<div class="wrapper">
  <div class="button-container">
    <div class="button"></div
  </div>
</div>

这是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;
}

Answer 1

已更新

演示：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;
}

Answer 2

我可能会对你提出的问题感到困惑，但改变了：

.button {
  width:50px;
  height:50px;
  background:blue;
}

要：

.button {
  width:50px;
  height:50%;
  background:blue;
}

你似乎想要...... http://jsfiddle.net/c3eB8/

修改

好了，现在我更好地理解了这个问题，为了使子div垂直居中，没有固定尺寸的父div，你可以使用绝对定位。

.button { width:50px; height:50px; background:blue; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

这是一个小提琴：http://jsfiddle.net/8UjvB/

Answer 3

也许这样：http://jsfiddle.net/helderdarocha/8p5MT/

它将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;
}

（将position:relative添加到父级，将margin:auto; position:absolute; top:0; bottom:0添加到.button语句中

设div为父div的50％高度

3 个答案: