jq获取屏幕高度,导航banner一屏幕

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<script src="js/jquery.js">
</script>
<style>    
*{
    padding: 0;
    margin: 0;
}
    #p1{
        background: pink;
    }
    .banner{
        background: red;
        height: 500px;
    }
    p{
        height: 300px;
        background: #000;
    }
</style>
</head>
<body>
<div id="p1">
    <div class="banner">

    </div>
</div>
<p></p>

<script>
$(document).ready(function(){
// alert($(window).height()); //浏览器当前窗口可视区域高度
    $('#p1').height($(window).height());
    })
</script>
</body>
</html>

这个方法也可以(个人习惯)

.banner{
    height: 100vh; /*banner高度一屏幕*/  /* height: calc(100% - 100px);*/
    background: pink;
}