Div 设置为视口高度，即使调整屏幕大小也是如此

Div Set to Viewport Height, Even When Screen Resized

本文关键字：屏幕 调整 设置 视口 高度 Div      更新时间：2023-09-26

我希望让一个名为nav的div（位于最顶部）占据整个屏幕高度，即使调整屏幕大小也是如此。这是我包含在索引文件中的脚本，但它不起作用。（我尝试使用高度：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>

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

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/

使用 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，因此暂时避免使用。

相关文章：