全屏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()
    });

這適用於所有瀏覽器（至少我測試過的所有瀏覽器）。 調整窗口大小不起作用，因為寬度和高度是固定的。 我可以創建一個對Window Size變化做出反應的偵聽器（我沒有查找它-但這應該可以工作）。

我不喜歡使用js設置CSS的想法。

沒有最佳實踐嗎？ 僅使用CSS應該可以做到這一點，不是嗎？ 我在網上找到的解決方案並不令人滿意。

Answer 1

像這樣嗎

您需要將視口（ html ）和內容（ body ）的尺寸都設置為100％，然后通過將div的高度和寬度設置為100% ，它將相對於視口進行計算，從而提供所需的功能（始終即使調整大小也可以填充）。

隨意忽略示例中的巨大鸚鵡圖片，我添加了它，因為通常在這樣的布局中，第一個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%;
}