需求：
頁面有固定高度的頭部header [height:60px]，底部footer [height:100px]∈焓罚現(xiàn)在要求內(nèi)容區(qū)域抡四，根據(jù)瀏覽器所在的屏幕大小自動調(diào)整，即大屏幕磨澡，內(nèi)容區(qū)域就高，小屏幕质和，內(nèi)容區(qū)域就矮一點(diǎn)稳摄，自動調(diào)整。比如饲宿，當(dāng)屏幕高度為1160px時厦酬，那么內(nèi)容區(qū)域高度應(yīng)該為1000px，當(dāng)屏幕高度為560px時瘫想，那么內(nèi)容高度應(yīng)該為400px仗阅。[這里，內(nèi)容區(qū)高度 = 屏幕高度 - 頭部高度 - 底部高度]
解決方案：
可通過VUE對class国夜，style動態(tài)綁定方案减噪，滿足這個需求。
代碼如下：
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',
//獲取屏幕高度
//內(nèi)容區(qū)域高度 = 當(dāng)前屏幕高度 - 頭部高度 - 底部高度
fullHeight: document.documentElement.clientHeight - 160
}
})
</script>
</html>
效果如下：
image.png
