Question

我希望制作一个名为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>

Answer 1

这里不需要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/

Answer 2

使用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，所以暂时不要使用它。

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

2 个答案: