Question

还可以使用吗？如何为旧版浏览器发布证明？

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

这是我特别想要完成的事情。

全宽/固定高度标题
拉伸全宽和全高的滑块 - 减去标题的高度。
在滑块中垂直和水平居中的标题栏
一个控制块，它始终是滑块底部的固定高度

这是我迄今为止所取得成就的形象。除了以上粗体部分外，它几乎完美无缺。滑块（黑色区域）当前拉伸100％高度并在标题后面流动，这对于图像来说是不合适的。

CSS Layout

如果我添加填充或边距，它会将滑块高度扩展到100％以上，我会得到一个滚动条。使用上面的高度计算似乎可以解决它，但根据我的理解，calc() isn't compatible with IE 7, IE 8, iOS 5 or lower, or 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;
}

最后，I made a fiddle以防你想玩它。谢谢你的帮助！

Answer 1

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

您可以尝试使用表格式结构，设置：

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

它应该作为fill-parent指令工作。

希望它有所帮助！：）

Answer 2

一个简单的vanilla 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）不支持Calc（），但可以使用非标准表达式（）语法在旧版IE中模拟。

在此处查看浏览器支持：http://caniuse.com/calc

Answer 4

我对这个派对来说有点晚了，但是对于那些想要将calc（）转化为IE8的人来说，实际上并没有任何替代polyfill的方法。 Microsoft删除了对非标准表达式（）语句的支持：

重要动态属性（也称为＆＃34; CSS表达式＆＃34;）在IE8标准模式及更高版本的Internet Explorer 8及更高版本中不再受支持。此决定是针对标准合规性，浏览器性能和安全性原因做出的。

Source here

This polyfill is tested in IE8

＆LT;沉思＆GT; 我不完全确定为什么MS决定性能和安全原因＆＃39;为了从IE8中删除表达式语句，他们之前从未真正关注过性能。当然，如果组织没有必要专门为其构建应用程序并依赖它，那么它甚至不会成为一个问题。你以为他们会用IE6吸取教训。详细说明会很好。＆lt; / musing＆gt;

是否存在高度的跨浏览器解决方案：calc（100％-70px）

4 个答案: