全屏Div - 可滚动 - 响应 - Crossbrowser - Bootstrap3

Question

我正在寻找一种方法来创建一个div，其高度和宽度与当前浏览器窗口大小相同。

即使重新调整窗口大小，这也应该有效。 全屏div后面应该有更多内容。 我正在使用Bootstrap3 - 但我不确定这是否会改变任何内容。

在Firefox / Chrome / IE

中使用它很容易

.fullscreen {
    min-height: 100%;
    min-height: 100vh;
    height: 100%;
    width: 100%;
    width: 100vw;
    height: 100vh;
}

这不适用于Safari。

所以我想出了一些js

$('.fullscreen').css({
        width: $(window).width(),
        height: $(window).height()
    });

这适用于所有浏览器（至少我测试过的所有浏览器）。调整窗口大小不起作用，因为宽度和高度是固定的。我可以创建一个对窗口大小更改做出反应的监听器（我没有查找它 - 但这应该有用）。

我不喜欢使用js设置css的想法。

没有最佳做法吗？这应该可以使用css，不应该吗？我在网上找到的解决方案并不令人满意。

Answer 1

Something like this?

您需要将视口（html）和内容（body）的尺寸设置为100％，然后将div的高度和宽度设置为{{1它将相对于视口计算，提供您需要的功能（即使在调整大小时也始终填充它）。

随意忽略示例中的巨大鹦鹉图片，我添加了它，因为通常在这样的布局中，第一个100%包含响应图像。

HTML

div

CSS

<div></div>
<div>More Content</div>