Question

有没有办法在不使用视口单元的情况下在空网页上应用全窗口背景？

当我尝试针对不支持vh / vw的浏览器对其进行校对时，实际页面不是空的，但是它的所有元素都是绝对定位的并且后台停止了工作，我猜原因是流程中没有任何内容，因此body没有高度。我可以用绝对单位（像素或em）来修复高度，但这不能完全适合窗口大小。

更新

有些人似乎认为“空网页”不够具体（问题暂停），所以这里是一个空的网页（好的，带有CSS的链接）看起来像：

<html>
  <head>
    <link rel="stylesheet" href="mystyle.css" type="text/css" />
  </head>
  <body>
  </body>
</html>

基本的非工作CSS：

body
{
  background-image: url('your image');
  background-size: 100% 100%;
}

Answer 1

你可能有几个选择。您可以使用背景定义在标记顶部放置position:fixed div：

<body>
    <div class="window-background"></div>
    ...


.window-background {
    background-image: url('your image');
    background-size: cover;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
}

您可以将背景应用于HTML标记：

html {
    background-image: url('your image');
    background-size: cover;
}

Answer 2

将“html”和“body”标签的高度设置为100％，这应该可行。

空网页上的全窗口背景？

更新

2 个答案: