<!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; }