Html IE和FireFox中div的高度百分比_Html_Css_Internet Explorer_Firefox

Html IE和FireFox中div的高度百分比

html css internet-explorer firefox

Html IE和FireFox中div的高度百分比,html,css,internet-explorer,firefox,Html,Css,Internet Explorer,Firefox,我知道这个问题已经被问了很多，但我仍然没有让这个工作。我也尝试过vh而不是%但是它不能像百分比那样扩展我正在尝试创建一个框，黑色背景垂直对齐在黄色div中。如果在左内括号div中更改高度，则可以使背景完全对齐。但我希望它的高度是50%，而不是静态值这可能吗 HTML 这是一个 OBS：我已经在身体、html和表单中添加了100%的高度。仍然没有结果。如果为指定特定高度，左括号div将起作用。试着换掉 height: 100%; 为了我一直在寻找一种解决方案，来定义一个在ie和其他浏览器

我知道这个问题已经被问了很多，但我仍然没有让这个工作。我也尝试过vh而不是%但是它不能像百分比那样扩展

我正在尝试创建一个框，黑色背景垂直对齐在黄色div中。如果在

左内括号div中更改高度，则可以使背景完全对齐。但我希望它的高度是50%，而不是静态值
这可能吗
HTML
这是一个
OBS：我已经在身体、html和表单中添加了100%的高度。仍然没有结果。
如果为指定特定高度，左括号div将起作用。试着换掉
 height: 100%;

为了
我一直在寻找一种解决方案，来定义一个在ie和其他浏览器中同样适用的高度百分比，但似乎什么都不起作用，ie总是把它显示得更大
刚刚遇到这个，我想和大家分享一下。我的工作热情：

也许是因为我很焦虑，一开始我不知道该怎么做。如果这对其他人有帮助，这里有一个简单的例子
您可以定义希望它在类本身中所占的百分比（在示例中，class=“header50”表示50%。如果我将其更改为class=“header100”，它将是100%）。而在脚本中仅标识为“.header”

新vUnit({
CSSMap：{
“.header”：{
属性：“高度”，
参考：“vh”
}
}    
}).init（）；
标题50%
内部div是否包含内容？是否可以定义的高度。左括号div
（目标div的父级）以像素为单位？如果是这样，那就行了。内部div将包含一些由angular生成的内容-是的。我无法定义.left-bracket div
的高度（以px为单位），因为我的解决方案可缩放角度中生成的每个节点。谢谢Nvioli。这适用于IE、Safari和Chrome，但不适用于FF？使用div的实际高度应适用于所有类型。我以前为了更灵活而避免使用它，但是如果您在中定义高度。括号匹配也许这不是问题？
.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;
}

 height: 100%;

 height: 300px;

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