怎么让页面的内容随着窗口变化全部高度铺满显示

为了让一些页面比较美观，需要让中间主体内容铺满，让所有内容显示在窗口中。

头部和底部固定，中间内容随着窗口大小变化

 

 这样就可以随着窗口大小，中间内容始终都跟着屏幕大小变化

不过如果窗口高度太小了，中间div也会没有了，所以要设置一个最小高度的值，这里设置600

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
        <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            header{            
                background-color: red;            
                height: 50px;
            }
            .container-fluid{
                padding: 0;
            }
            nav{
                
                background-color: green;
            }
            article{
                padding: 0;
                background-color: yellow;
            }
            footer{
                height: 30px;                
                background-color: blue;
            }
            
        </style>
        <script type="text/javascript">
            $(function(){
                function resizes(){
                    var navHeight=$(window).height()-80;//到当前屏幕的高度，再减去头部50和底部30的固定高度
                     navHeight=navHeight>600 ? navHeight : 600//三元运算符，navHeight高度大于600按窗口高度显示，小于600时高度固定为600
                      $("nav,article").css("height",navHeight)//添加两个标签的高度
                }
                
                 // $(window).on('resize', resizes);//窗口变化时执行resizes方法
                 // $(window).trigger('resize');// 因为刚开始加载窗口没有变化，执行不了函数，所以要让window对象立即触发一下resize
                $(window).on('resize', resizes).trigger('resize');
                //jquery链，一步完成，同样的意思
            })
            
            
            
            
        </script>
    </head>
    <body>
        
        <header>
            11
        </header>
        <div class="container-fluid">
            <nav class="col-sm-2">
                22
            </nav>
            <article class="col-sm-10">
                33
            </article>
        </div>
        <footer>
            
            44
        </footer>
    </body>
</html>

还有一种方法，就是给body和HTML标签设置height:100%，然后给头部设置10% 中间高度设置80%，底部设置10%，也是一样铺满整个屏幕，但是这样让头部和底部的内容变形比较难看。

 

posted @ 2020-04-26 11:12  三线码工  阅读(888)  评论(0)  编辑  收藏  举报