html - IE和FireFox中div的高度百分比

Question

我知道这个问题已经被问了很多，但我仍然无法解决这个问题。我也试过 vh 而不是 % 但它没有按百分比缩放。

我正在尝试创建一个在黄色 div 中垂直对齐的黑色背景框。如果您更改 inner-left-bracket-div 中的高度，则可以使背景完美对齐。但我希望它的高度为 50%，而不是静态值。

这可能吗？

HTML

<div class="left-bracket-div">
        <div class="inner-left-bracket-div"></div>
    </div>
<div class="bracket-match">
</div>

CSS

.left-bracket-div{
    display: table-cell;
    width: 10px;
    height: 100%;
    background: yellow;
    vertical-align: middle;
    text-align: center;
}

.inner-left-bracket-div {
  width: 100%;
  height: 50%;
  background: black;
}

div.bracket-match {
    display: table-cell;
    width: 100px;
    height: 300px;
    background: gray;
    vertical-align: middle;
    text-align: center;
}

这是一个demo

OBS:我已经为正文、html 和表单添加了 100% 的高度。仍然没有结果。

Answer 1

如果您为 .left-bracket-div 指定一个特定的高度，它将起作用。尝试换出

 height: 100%;

对于

 height: 300px;

http://jsfiddle.net/mcSfe/2977/