javascript - Div 设置为视口高度，即使屏幕调整大小

Question

我希望让一个名为 nav 的 div （位于最顶部）占据整个屏幕高度，即使调整屏幕大小也是如此。这是我的索引文件中包含的脚本，但它不起作用。（我尝试使用 height: 100vh，但这对我也不起作用。）

<script>
    $(document).ready(function(){
    resizeDiv();
    });

    window.onresize = function(event) {
    resizeDiv();
    }

    function resizeDiv() {
    vpw = $(window).width();
    vph = $(window).height();
    $('#nav').css({'height': vph + ‘px’});
    }
</script>

Answer 1

使用 Jquery 你可以用这个

CSS

    body {
        padding:0;
        margin: 0;
    }
    #nav {
        width:100%;
        background-color:#abc;
        text-align:center;
    }

    #height {
        font-size:20px;
    }

HTML

<div id="nav">
    <span id="height"></span>
</div>

脚本

    $(window).on("resize", function(){
        var height = $(window).height();
        $("#nav").css({ "height": height });
        $("span#height").html("the height is " + height);
    }).resize();

由于在函数的最后一部分使用了“.resize()”，这应该在加载和调整大小时都有效。

请记住，“$(window).height()”返回带有水平滚动条的窗口的高度，如果呈现的话。

并非所有浏览器都完全支持 VH，因此暂时避免使用它。

Answer 2

这里不需要 jScript。我认为您正在寻找的是 css flexbox-model：

html, body {
  height: 100%;
}
body {
  display: flex;
}

#nav {
  flex: 1;
}

没有在这里尝试过，但是那个应该适合你。只需添加height: 100%; display: flex到父元素和flex: 1子元素。

参考https://css-tricks.com/snippets/css/a-guide-to-flexbox/