IE 和 FireFox 中 div 的高度百分比答案

【问题标题】：Height percentage of divs in IE and FireFoxIE 和 FireFox 中 div 的高度百分比
【发布时间】：2016-05-27 19:13:29
【问题描述】：

我知道这个问题已经被问了很多，但我仍然没有解决这个问题。我也尝试过 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% 的高度。还是没有结果。

【问题讨论】：

内部div有内容还是根本没有内容？
你能以像素为单位定义.left-bracket-div（目标div的父级）的高度吗？如果是这样，那将起作用。
内部 div 将包含一些由 angular 生成的内容 - 所以是的。我无法以 px 为单位定义 .left-bracket-div 的高度，因为我的解决方案会针对以角度生成的每个节点进行缩放。

标签： html css internet-explorer firefox

【解决方案1】：

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

 height: 100%;

为

 height: 300px;

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

【讨论】：

谢谢恩维奥利。这适用于 IE、Safari 和 Chrome，但不适用于 FF？
使用 div 的实际高度应该适用于所有。我之前为了更灵活而避免使用它，但如果您在 .bracket-match 中定义高度，也许这不是问题？

【解决方案2】：

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

刚刚遇到这个，想分享一下。对我有用： http://joaocunha.github.io/vunit/

也许是因为我很着急，一开始我不知道该怎么做。如果它对其他人有帮助，这里有一个简单的例子。

您定义希望它在类本身中的百分比（在示例中 class="header50" 表示 50%。如果我将其更改为 class="header100" 它将是 100%）。而在脚本中仅被标识为“.header”

<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>

【讨论】：