深度嵌套元素的高度为100％

Question

我正在创建一个包含多个屏幕的前端的Wordpress页面。这些页面中的第一个包含一个background-image，它应该是cover整个页面。

在为每个级别的父元素分配height: 100%时，它按预期工作。

由于我使用了page-builder-plugin（我创建网站的人希望能够轻松编辑内容），所以第一个（100％高度页面）被深深嵌套（如html > body > #page > #main > article > .entry-content > div > div > div > div ...

将此元素设置为100％高度是否有更好的选择？

注意：必须兼容到IE 8

Answer 1

唯一可行的替代方案是使用viewport units和polyfill来实现包括IE8在内的所有工作：

https://gist.github.com/LeaVerou/1347501

.your-element { height: 100vh; }

注意：上面的polyfill还需要Lea的StyleFix JS库： https://github.com/LeaVerou/prefixfree

如果你想在没有JavaScript的情况下这样做（我从不建议使用JavaScript进行基本布局），那么在所有元素上设置height:100%是唯一的方法。