有一个跨浏览器的解决方案，以高度：理论值（100％-70px）

它是确定没有使用它？我如何对旧版浏览器进行防弹测试？有一个跨浏览器的解决方案，以高度：理论值（100％-70px）

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

这是我正在努力完成的。

全宽度/固定高度头
绵延全宽和全高的滑块 - 减去报头的高度。
是在滑块垂直和水平居中的大字标题块
A控制块，始终是从滑块

这里的底部固定高度是什么，我已经能够实现图像至今。这几乎是完美的，除了上面的粗体字部分。滑块（黑色区域）当前伸展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如果你想玩弄它。谢谢您的帮助！

来源

2013-07-25 timshutes

你是什么意思？我没有回答 - 我在问一个问题。我正在寻找答案。 – timshutes

如果你想要一个可以在IE7中工作的纯粹的CSS解决方案，那么你几乎不会碰运气，因为你需要支持'display：table | table-cell'（IE8 +）。你最好的选择是让它看起来适合有能力的浏览器，并且它可以用于古董。 – cimmanon

只要不过重，我可以用jQuery解决方案。对我来说更重要的是Android/iOS的兼容性。 – timshutes

一个简单的香草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-25 20:24:28

我会试试这个。这种解决方案的主要优势在于它可以/应该在所有支持.js的设备上工作，而不仅仅是更新的浏览器。 – timshutes

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

退房的浏览器支持浏览：http://caniuse.com/calc

来源

2013-08-19 20:14:50

已经提到并链接到问题中 – timshutes

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

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

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

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

希望它有帮助！ :)

来源

2014-07-18 07:40:26

我对这个派对有点迟到，但对于任何想要让calc（）进入IE8的人来说，没有任何替代方法可以实现polyfill。微软取消了非标准的表达（）语句的支持：

重要的动态特性（也称为“CSS表达式”）在Internet Explorer 8中不再支持，后来在IE8标准模式和更高。该决定是针对标准合规性，浏览器性能和安全原因而做出的。

Source here

This polyfill is tested in IE8

<沉思> 我不完全知道为什么MS决定性能和“安全原因”删除IE8从该表达式语句，他们似乎从来没有真正成为关注之前的表现。当然，如果组织不需要专门为其构建应用程序并依赖它，那么它甚至不会成为问题。你会以为他们会用IE6学到他们的课程。详细说明会很好。 < /沉迷>

来源

2017-03-10 10:07:10

有一个跨浏览器的解决方案，以高度：理论值（100％-70px）

回答

相关问题