1

还可以用这个吗？我如何为旧版浏览器防弹？

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

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

  1. 全宽/固定高度标题
  2. 拉伸全宽和全高的 Slider -减去页眉的高度。
  3. 在滑块中垂直和水平居中的标题块
  4. 一个 Controls 块，它始终距离滑块底部的固定高度

这是迄今为止我能够实现的目标的图像。除了上面粗体部分之外，它几乎是完美的。滑块（黑色区域）当前拉伸 100% 高度并流到标题后面，这不适用于图像。

CSS 布局

如果我添加填充或边距，它会将滑块高度扩展到 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;
}

最后，我做了一个小提琴，以防你想玩弄它。谢谢您的帮助！

4

4 回答 4

1

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

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

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

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

希望能帮助到你！:)

于 2014-07-18T07:40:26.087 回答
0

一个简单的 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
});
于 2013-07-25T20:24:28.773 回答
0

旧版浏览器（例如 IE7 或 IE8）不支持 Calc()，但可以在旧版 IE 中使用非标准的 expression() 语法进行模拟。

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

于 2013-08-19T20:14:50.637 回答
0

我参加这个聚会有点晚了，但是对于任何正在寻找将 calc() 导入 IE8 的方法的人来说，实际上没有任何替代 polyfill 的方法。Microsoft 删除了对非标准 expression() 语句的支持：

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

来源在这里

这个 polyfill 在 IE8 中测试

<沉思> 我不完全确定为什么 MS 出于性能和“安全原因”决定从 IE8 中删除表达式语句，他们以前似乎从未真正关心过性能。当然，如果他们没有让组织有必要专门为它构建应用程序并依赖它，这甚至都不是问题。您会认为他们会从 IE6 中吸取教训。详细说明会很好。</musing>

于 2017-03-10T10:07:10.320 回答