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

Question

I am looking to make a div called nav (featured at the very top) take up the entire screen height, even when the screen is resized. This is the script that Ive included in my index file, but it does not work. (I tried working with height: 100vh, but that didn't work for me either.)

<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

No need for jScript here. I think what you're looking for is the css flexbox-model:

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

#nav {
  flex: 1;
}

Havent tried it here, but that one should work for you. Simply add height: 100%; display: flex height: 100%; display: flex to the parent and flex: 1 on the child element.

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

Answer 2

Using Jquery you can go with this

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>

Script

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

This should work both on load and resize thanks to the use of the ".resize()" in the last section of the function.

Keep in mind that "$(window).height()" return the height of the window WITH the horizontal scrollbar, if rendered.

VH is not fully supported on all the browsers so avoid it for now.