css实现后台管理系统自适应布局

在制作后台管理页面的时候会遇到一个问题，就是左侧菜单栏折叠起来的时候，想要右侧的主体自动的填满左侧菜单栏收起的空白，当然这里使用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>

专业前端小白

发布了77 篇原创文章 · 获赞 16 · 访问量 11万+

私信关注

css实现后台管理系统自适应布局

猜你喜欢