简单搭建后台管理系统布局
最终实现的效果如下:
要求:上面的header固定不动,左面的菜单和内容部分的高度到浏览器的底部,并且他们的内部可以滚动
写这个demo需要考虑的几个问题
1 如果不给html和body设样式他们的高度是什么样的,结果发现他们是没有高度的和普通div一样。
所以应该把html和body的高度设置成100%
html,body {
height: 100%;
margin: 0px;
padding: 0px;
}
先写出html结构:
<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...
如果觉得有收获请关注微信公众号 前端良文 每周都会分享前端开发中的干货知识点。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。