html - 有没有针对高度: calc(100%-70px)的跨浏览器解决方案

Question

还可以使用吗？我如何为旧浏览器提供防弹保护？

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

这是我想要完成的具体目标。

1. 全宽/固定高度标题
2. 拉伸(stretch)全宽和全高的 slider - 减去标题的高度。
3. 在 slider 中垂直和水平居中的标题 block
4. 始终与 slider 底部保持固定高度的控件 block

这是我到目前为止所取得的成就的图片。它几乎是完美的，除了上面加粗的部分。 slider (黑色区域)当前拉伸(stretch) 100% 高度并在标题后面流动，这对于图像来说是不合适的。

如果我添加填充或边距，它会将 slider 高度扩展到 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%到 table 本身；
• height: <what you want>到表头(第一行)；
• height: auto到表格内容。

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

希望对您有所帮助! :)