后台管理系统样式布局写法

我也是刚开始学布局，对后台管理系统的布局并不了解，但想尝试一下，最后呈现的结果如下：

将布局划分为三块：顶部，左侧，右侧

html代码呈现为：

  top为顶部，nav-container为左侧导航栏，main为右侧内容区

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
   <div class="view">
      <div class="top"></div>
      <div class="nav-container"></div>
      <div class="main"></div>
   </div> 
</body>
</html>

 

  css样式（采用的less写法）：

  注意：若要cpoy此段代码，请先将样式初始化（reset.css），否则呈现效果不正常

html,body{
    width: 100%;
    height: 100%;
}

.view{
    position: relative;
    width: 100%;
    height:100%;
    overflow: hidden;
    .top{
        position: fixed;
        left:0;
        top:0;
        width:100%;
        height: 54px;
        background-color: #ffc0cb;
    }
    .nav-container{
        position: absolute;
        left:0;
        top:54px;
        bottom:0;//在不能设置高度的情况使用定位bottom结合top会产生高度,同理，宽度也可以
        width:208px;
        background-color: #87ceeb;
    }
    .main{
        position: absolute;
        right:0;
        top:54px;
        bottom:0;
        left:208px;//结合一边已经有宽度来给无边框无宽度的盒子通过定位给到宽度
        background-color: yellow;
    }
}

  在布局中所遇到的问题：

  首先根据UI图可知：

  1.顶部的宽高（宽：100%，高：UI图中测量）

  2.左侧的宽（宽：UI图中测量），左侧的高度未知？

  3.右侧的宽高未知

  如果只想要通过UI图测量出每一块大盒子的宽高这是不可能的，但盒子与盒子之间是有关系的

  盒子之间的关系（解决问题）：

  1.左侧的高度不知，但知道左侧距顶部的距离，即顶部的高度

  2.右侧内容区宽高都不知，但知道右侧距顶部的距离（100%(高)-top(高)），即顶部的高度；右侧距左侧的距离（100%(宽)-左侧（宽）），即左侧的宽度

  根据盒子之间的关系，可使用定位来解决不知道盒子宽高的问题：

  顶部：

  顶部宽高都知道，使用固定定位：

.top{
        position: fixed;
        left:0;
        top:0;
        width:100%;
        height: 54px;
        background-color: #ffc0cb;
    }

  左侧：

  只知宽，使用绝对定位（子绝父相），同时设置top(拉开和顶部的距离)和bottom（即设置top有设置bottom,可将盒子拉伸）

.nav-container{
        position: absolute;
        left:0;
        top:54px;
        bottom:0;//在不能设置高度的情况使用定位bottom结合top会产生高度,同理，宽度也可以
        width:208px;
        background-color: #87ceeb;
    }

  右侧：

  宽高皆不知，最依赖与顶部和左侧，使用绝对定位，同时设置top(拉开和顶部的距离)和bottom（即设置top又设置bottom,可将盒子拉伸），同时设置left(拉开和左侧的距离)和right(即设置left又设置right,可将盒子拉伸)

.main{
        position: absolute;
        right:0;
        top:54px;
        bottom:0;
        left:208px;//结合一边已经有宽度来给无边框无宽度的盒子通过定位给到宽度
        background-color: yellow;
    }

  如果有遇到其他布局后台管理的方式，有空的话，我会更新上，最后呢，学到这种程度，我还是觉得布局真的很难。