html - 以 % 表示的高度 - 渲染缓慢

Question

我的背景

IINM，percentage-height 假设在计算高度时，父级的高度是可用的。

我有一个 header 的背景图片，其样式如下

header{
    width: 100%;
    height:100%; // This height is what I'm talking about
    font-size: 7em;
    background: url(../images/landing_image.jpg) no-repeat;
    background-size: cover;
}

在我的 drupal 网站中，我可能会组合/压缩具有重新排序的意外副作用的 css 文件。也就是说，在计算 100% of parent's height 时， parent 的高度可能不可用。什么是可能的解决方法？我可以根据视口(viewport)高度指定高度吗？

height:view-port-height;

此外，我还没有完全理解 vh 单位。它是如何工作的？

Answer 1

我不知道指定高的任何其他方式，但 % 应该不会有什么不同。即使它确实使它变慢，我们也只会说慢几微秒。

考虑到找到更好的解决方案需要付出的额外工作量，我个人并不担心这一点。

在再次查看您的问题后说，可能有一种更快的方法可以渲染仍然使用 css。像这样:

header {
 position:fixed !important;
 position:absolute;
 top:0;
 right:0;
 bottom:0;
 left:0;
}

这会将页眉设置为覆盖整个页面，而无需找出父级的高度。