Question

我尝试在谷歌上搜索，但我似乎无法找到解决我的问题的方法，即我喜欢制作一个背景图片，这是div的一部分，看起来是全尺寸并覆盖整个浏览器窗口。将背景图像移动到body元素是不可能的（使用我正在使用的主题的约束）并且我尝试使用高度：100％（不起作用）和高度：100vh（哪个工作但背景图像扩展更多是必要的。）

我已将问题简化为：

<body>
    <div id="topmenu">menu</div>
    <div id="box1">
        <div id="box2">
            <div id="box3">
                <div id="homepage">
                    <div>text</div>
                </div>
            </div>
        </div>
    </div>
</body>

隐藏在几层div下的#homepage有背景图片，我想全屏展开。

我创造了一个小提琴，以便你理解我在说什么。

https://jsfiddle.net/6x08snnt/17/

非常感谢你的帮助！

Answer 1

百分比高度取决于父母的身高。如果html没有高度，body {height: 100%;}将无法执行任何操作。

在某些浏览器中，body元素也有边距，所以让我们重置它。

假设您希望两个元素填充页面而不滚动，则需要使用calc()将硬px值与百分比相结合。

#topmenu {
  height: 16px;
  background-color:red;
}
#homepage {
  height: calc(100% - 16px);
  background-image: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTbqU-zynH0eweJzs4Kd6dQ0fkpr-eEUu_oHdv9Zd8w1-5vv19n);
  background-repeat: no-repeat;
  background-size:cover;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
}

<div id="topmenu">menu</div>
<div id="homepage">
  <div>text</div>
</div>

Answer 2

如果您使用当前HTML解决方案，那么将背景图像分散到整个屏幕上就很难了。
在这种情况下，屏幕尺寸（即使保持100％高度）始终取决于#homepage div的内容。
最佳方法是在#homepage div内再添加一个DIV。您可以为此新引入的div设置＆＃39; FIXED＆＃39; 位置，并将其设置在页面底部。您可以访问 - position div in the bottom of web page。
通过这种方式，无论页面内容如何，最终都会确保您的网页占据整个网页，最终 background effect will appear for whole page 。

其他CSS和HTML编码对您来说可能是最好的exercise，因为您也可以自己动手。

请试试这个 -

#your-div-id {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Answer 3

你应该使用calc函数：如果您希望您的deiv具有浏览器高度减去菜单高度，您可以编写如下内容：

div {
  height: calc(100vh - 16px);
}

如果菜单高度为16像素。

Div背景图像全高度在浏览器上

3 个答案: