是否有一个跨浏览器解决高度：计算值（100％-70px）(Is there a cross-brow

它是确定没有使用它？我如何防弹它旧的浏览器？

height: -moz-calc(100% - 70px);
height: -webkit-calc(100% - 70px);
height: calc(100% - 70px);

下面是具体是什么，我试图完成。

全宽度/固定高度头
减去报头的高度 -即拉伸全宽和全高的滑块。
即在滑块垂直和水平中心的地标题块
A控制块，始终是从滑块的底部的固定高度

这里是什么，我已经能够迄今为止达到的图像。这几乎是完美的，除了上面的粗体字部分。滑块（黑色区域）当前伸展100％的高度和标头，这是不正常为图像后面流动。

如果我添加填充物或保证金，它扩展了滑块高度超过100％，我得到一个滚动条。使用上述高度计算似乎解决它，但是从我的理解， calc()是不与IE 7，IE 8，iOS的5或更低，或Android兼容。

是否有此问题的一个更好的解决？ jQuery是好的，但如果存在的话我宁愿一个CSS的解决方案。

这里是我的HTML：

<div class="header">
    <h1>Header - Full Width + 70px Height</h1>
</div>

<div class="slider">
    <div class="headline">
        <div class="headline-container"><!-- for table-cell vertical centering -->
           <h1>Headline Block</h1>
            <p>Centered Horizontally &amp; Vertically in the Slider Block</p>
       </div>
    </div>

    <div class="controls">
        <h2>Controls - Centered Horizontally &amp; 40px from bottom of container</h2>
    </div>
</div>

这里是我的CSS：

html, body {
    width: 100%;
    height: 100%;
    margin: 0; padding: 0;
}

h1, h2, p {
    margin: 0;
    padding: 0;
}

.header {
  position: absolute;
  width: 100%;
  height: 70px;
  background-color: #888;
  z-index: 9999;
}

.header h1 {
  color: #fff;
  text-align: center;
}

.slider-desc {
    color: #fff;
    text-align: center;
    margin: 15px 0 0;
}

.slider {
  width: 100%;
  height: 100%;
  background-color: #000;
}

.headline {
    display: table;
    width: 100%;
    height: 100%;
}

.headline-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.headline-container h1, .headline-container p {
    background-color: #fff;
}

.controls {
  position: absolute;
  width: 100%;
  bottom: 40px;
  text-align: center;
  background-color: yellow;
}

最后，我做了一个小提琴的情况下，你要玩它。谢谢您的帮助！

Answer 1:

我不喜欢的JavaScript函数来处理我的HTML元素的尺寸/大小调整，但有时这是唯一可能的方式。

你可以尝试用表结构，设置：

height: 100%表本身;
height: <what you want>表头（第一行）;
height: auto表的内容。

它应该作为fill-parent指令。

希望能帮助到你！ :)

Answer 2:

一个简单的香草JS一块可能对这项工作（jQuery是太麻烦了，为这么小的任务负载的）：

document.getElementsByClassName("slider")[0].style.height = window.innerHeight - 70;

很显然，你需要将它定位70px从顶部。
还记得监听窗口大小调整：

window.onresize = function () {
    // Code above
}

如果你真的想要的jQuery，

$(".slider").height($(document).height() - 70);
$(window).resize(function () {
    // Code above
});

Answer 3:

计算值（）不是通过旧的浏览器，诸如IE7或IE8支持，但可以使用非标准的表达（）语法旧版本的IE被仿真。

点击这里，查看浏览器支持： http://caniuse.com/calc

Answer 4:

我有点晚了这个聚会，为寻找一种方式来获得计算（）到IE8，确实没有任何替代物填充工具。微软取消了非标准的表达（）语句的支持：

重要的动态特性（也称为“CSS表达式”）不再支持在Internet Explorer 8和更高版本，在IE8标准模式和更高。这一决定是为符合标准，浏览器的性能和安全性的原因作出。

这里来源

这种填充工具在IE8测试

<沉思>我不完全知道为什么MS决定性能和“安全原因”删除IE8从该表达式语句，他们似乎从来没有真正之前与性能有关。当然，它甚至不会是一个问题，如果他们不做出有必要组织专门构建应用程序并依赖于它。你会认为他们会学到他们与IE6的教训。阐述将是很好的。</沉思>

文章来源: Is there a cross-browser solution to height: calc(100%-70px)