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/

Answer 2

我一直在寻找一种解决方案，用于定义在ie和其他浏览器中工作相同的高度百分比，似乎没有任何效果，即总是显示更大。

刚刚遇到这个，想分享它。作品为我而工作： http://joaocunha.github.io/vunit/

也许是因为我很焦虑，我一开始并没有意识到该怎么做。如果它对其他人有帮助，这里有一个简单的例子。

您可以定义您希望它在类本身中的百分比（在示例类=＆＃34; header50＆＃34;表示50％。如果我只是将其更改为class =＆＃34; header100＆＃34;它将是100％）。在脚本中被标识为＆＃34; .header＆＃34;仅

<head>
<script src="path/to/vunit.js"></script>
<script>
    new vUnit({
      CSSMap: {
        '.header': {
          property: 'height',
          reference: 'vh'
        }
      }    
    }).init();
</script>
</head>

<div id="header" class="header50">Header 50%</div>

IE和FireFox中div的高度百分比

2 个答案: