VUE 元素根据屏幕高度自动调整自身高度

需求：
页面有固定高度的头部header [height:60px]，底部footer [height:100px]。现在要求内容区域，根据浏览器所在的屏幕大小自动调整，即大屏幕，内容区域就高，小屏幕，内容区域就矮一点，自动调整。比如，当屏幕高度为1160px时，那么内容区域高度应该为1000px，当屏幕高度为560px时，那么内容高度应该为400px。[这里，内容区高度 = 屏幕高度 - 头部高度 - 底部高度]
解决方案：
可通过VUE对class，style动态绑定方案，满足这个需求。
代码如下：
css.css

.header {
    background-color: #333333;
    width: 100%;
    height: 60px;
}

.content {
    background-color: #FFFFFF;
    width: 100%;
    height: 100%;
}

/*伪类元素*/
.content:after {
    content: "";
    display: block;
    clear: both;
}

.content .directory {
    background-color: #f9f9f9;
    width: 240px;
    float: left;
}

.content .itemlist {
    background-color: #CCCCCC;
    width: 240px;
    float: left;
}

.footer {
    background-color: #333333;
    width: 100%;
    height: 100px;
}

index.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="css/index.css">
        <link rel="stylesheet" href="css/index_page.css" />
        <link rel="stylesheet" href="css/reset.css" />
        <link rel="stylesheet" href="css/page.css" />
        <script type="text/javascript" src="js/vue.min.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </head>

    <body>
        <div id="app">
            <div class="header"></div>

            <div class="content">
                <div class="content directory" :style="{height:fullHeight + 'px', backgroundColor:color}"></div>
                <div class="content itemlist"></div>
            </div>

            <div class="footer"></div>
        </div>
    </body>

    <script>
        var vm = new Vue({
            el: "#app",
            data:{
                color: 'yellow',
                //获取屏幕高度
                //内容区域高度 = 当前屏幕高度 - 头部高度 - 底部高度
                fullHeight: document.documentElement.clientHeight - 160
            }
        })
    </script>

</html>

效果如下：

image.png

最后编辑于：2019.11.30 13:42:19