在製作後臺管理頁面的時候會遇到一個問題，就是左側菜單欄摺疊起來的時候，想要右側的主體自動的填滿左側菜單欄收起的空白，當然這裏使用js是很容易實現的，但是我們不想用js，能不能直接讓css自動計算呢。
下面是實現方法：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>控制檯</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: #e9e9e9;
}
header{
width: 100%;
height: 60px;
background-color: #fff;
border-bottom: 1px solid #ddd;
}
.container{
height: calc(100% - 80px);
width: 100%;
overflow: hidden;
}
.container aside{
width: 250px;
height: 100%;
background-color: #fff;
border-right: 1px solid #ddd;
transition: all .25s;
float: left;
background-color: #fff;
border-right: 1px solid #ccc;
transition: all .25s;
}
.container .aside-active{
width: 60px !important;
}
.aside-shrink{
width: 100%;
height: 50px;
font-size: 20px;
font-weight: 900;
text-align: center;
line-height: 50px;
}
.shrink-icon{
display: inline-block;
height: 50px;
width: 50px;
background-color: #ddd;
border-radius: 50%;
}
.container section{
height: 100%;
padding: 10px;
overflow: hidden;
}
.container section .main{
width: 100%;
height: 100%;
box-shadow: 0px 0px 5px 5px #ddd;
}
</style>
</head>
<body>
<header></header>
<section class="container" id="container">
<aside id="aside">
<div class="aside-shrink"><label class="shrink-icon"><</label></div>
</aside>
<section>
<div class="main"></div>
</section>
</section>
<script type="text/javascript">
var height = window.innerHeight || window.screen.height;
height = height - 60;
document.getElementById("container").style.height = height + "px";
var state = false;
document.getElementById("aside").addEventListener("click", function(){
if(state){
this.classList.remove("aside-active");
}else{
this.classList.add("aside-active");
}
state = !state;
});
</script>
</body>
</html>