简单搭建后台管理系统布局

时间 2019-11-08

标签简单搭建后台管理系统布局繁體版

原文原文链接

简单搭建后台管理系统布局

最终实现的效果以下：

要求：上面的header固定不动，左面的菜单和内容部分的高度到浏览器的底部，而且他们的内部能够滚动css

写这个demo须要考虑的几个问题
1 若是不给html和body设样式他们的高度是什么样的，结果发现他们是没有高度的和普通div同样。
因此应该把html和body的高度设置成100%html

html,body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

先写出html结构：node

<body>
  <div class="header">
  </div>
  <div class="main">
    <div class="sider">
      <ul id="menu">
      </ul>
    </div>
    <div class="container">
        <div class="content">
          <p>实现一个基本的</p>
        </div>
    </div>
  </div>
</body>

2 开始的时候我没有把header设置成fixed，可是出现的问题是，我须要让main高度自适应，因此须要把height设置成100%，可是那样的话main和body的高度相同，因此main+header的高度就大于body的高度，就会出现body的滚动条。因此想到的解决办法是让header设成fixed，固定高度80px,main的高度和body相同，因此main的上面有80px是被header覆盖的，因此能够给main加上80px的padding-top，若是直接加，你会发现main的高度就变成了80px加上原来的height。咱们想要的效果是main总的高度不变，padding-top+新的高度 = 原来的body高度。
因此这里又用到了css3中的box-sizing，设置成border-sizing。
3 而后就是简单的左面固定和右面自适应的布局，把他们的overflow设置成scroll。
具体的实现代码参见：https://github.com/yylgit/nod...css3