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

Simon_Zhou 发布于2019-08-29 12:35 / 2555人阅读

摘要：简单搭建后台管理系统布局最终实现的效果如下要求上面的固定不动，左面的菜单和内容部分的高度到浏览器的底部，并且他们的内部可以滚动写这个需要考虑的几个问题如果不给和设样式他们的高度是什么样的，结果发现他们是没有高度的和普通一样。

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

最终实现的效果如下：

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

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

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

先写出html结构：

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...

GPU云服务器云服务器 html简单布局网站 asp简单后台制作简单的云服务器怎么搭建客户管理系统简单

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112006.html

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

摘要：简单搭建后台管理系统布局最终实现的效果如下要求上面的固定不动，左面的菜单和内容部分的高度到浏览器的底部，并且他们的内部可以滚动写这个需要考虑的几个问题如果不给和设样式他们的高度是什么样的，结果发现他们是没有高度的和普通一样。简单搭建后台管理系统布局最终实现的效果如下：showImg(https://segmentfault.com/img/bVNsjn?w=2810&h=780);...

NotFound 2019-08-01 16:49 评论0 收藏0
观众老爷们，来试试这个用 Vue 撸的数据可视化后台吧

摘要：至于如何优雅地管理使用，再次祭出潘神的文章手摸手，带你优雅的使用掘金项目的后端接口文档我是用的进行的管理，其实有很多强大的功能，不仅仅是一个接口测试工具，接口文档管理就是其中一个。首先放个线上地址大家感受一下(由于后端用的是 leancloud 的免费套餐，因此可能会比较慢)： vue-data-board P.S. 建议大家尽量自己注册一个账号(可以随便填一个密码)，如果用默认的测...

JinB 2019-08-23 18:12 评论0 收藏0
分享一下我的 vue + koa + mysql 搭建博客之旅

摘要：最后感谢各位的观看如果有什么意见或者建议的话还望多多指教感谢如果感觉我的博客还过得去的话还请给个鼓励一下作者嘿嘿。一直以来都想用自己的技术做一些个人项目, 之前的博客是基于 hexo 搭建, 感觉啥都是别人帮你写好了, 于是便决定自己搞一个, 断断续续地弄了一段时间, 也总算是完成了个简单版本并部署上线. 博客线上地址博客地址：cykspace 博客后台：cykspace-node...

cnTomato 2019-08-22 17:19 评论0 收藏0