html - 深度嵌套元素的高度 100%

Question

我正在创建一个 Wordpress 页面，其中包含一个由多个屏幕组成的首页。这些页面中的第一个包含一个 background-image，它应该覆盖整个页面。

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

由于我使用了页面构建器插件(我为其创建网站的人希望能够轻松编辑内容)第一个(100% 高度页面)是深度嵌套的(如 html > body > #page > #main > article > .entry-content > div > div > div > div ...

是否有更好的替代方法来将此元素设置为 100% 高度？

注意:它必须向下兼容 IE 8

Answer 1

唯一可能的替代方法是使用 viewport units 和 polyfill:

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

.your-element { height: 100vh; }

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

如果您想在没有 JavaScript 的情况下执行此操作(我从不建议使用 JavaScript 进行基本布局)，那么在所有元素上设置 height:100% 是唯一的方法。