javascript - 全屏 Div - 可滚动 - 响应式 - 跨浏览器 - 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()
    });

这适用于所有浏览器(至少我测试过的所有浏览器)。调整窗口大小不起作用，因为宽度和高度是固定的。我可以创建一个对窗口大小变化使用react的监听器(我没有查过 - 但这应该有效)。

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

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

Answer 1

Something like this?

您需要将视口(viewport) (html) 和内容 (body) 的尺寸都设置为 100%，然后通过给定一个 div 100% 的高度和宽度将相对于视口(viewport)进行计算，提供您需要的功能(即使在调整大小时也始终填充它)。

请忽略示例中巨大的鹦鹉图片，我添加它是因为通常在此类布局中，第一个 div 包含响应图像。

HTML

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

CSS

html, body {
    height:100%;
    width:100%;
    position:relative;
    margin:0;
    padding:0;
}
div:first-of-type {
    height:100%; /* <-- keep the div 100% of the viewport height */
    width:100%; /* <-- keep the div 100% of the viewport width */
    background-image:url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSbcnkIVXLz23PALu8JD-cTGe8KbXKC1JV0gBM_x1lx3JyaNqE7);
    background-size:cover;
    background-position:center center;
}
div:last-of-type {
    background:green;
    position:relative;
    color:white;
    height:100%;
}