后台管理系统基本布局
2020-02-23 本文已影响0人
六寸光阴丶
写在前面
如果本文对您有所帮助，就请点个关注吧！
背景
最近经常会写一写后台管理系统的界面，样式总是会调整半天，今天特地总结一下，以后可以直接使用。
总体采用了flex布局
主要要求
- 头部和脚部固定位置在最上面和最下面
- 中间分为侧边栏和内容栏，侧边栏宽度固定，内容栏宽度自适应
- 侧边栏和内容栏可以分别滚动，互不干扰
实现效果截图
后台管理系统基本布局.png
实现代码
<!DOCTYPE html>
<html>
<head>
<title>flex</title>
<meta charset="utf-8">
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.window {
height: 100%;
display: flex;
flex-direction: column;
}
.header {
height: 80px;
background-color: #efefef;
}
.footer {
height: 50px;
background-color: #efefef;
}
.main {
flex: 1;
display: flex;
overflow-y: hidden;
}
.aside {
height: 100%;
width: 250px;
overflow-y: auto;
}
.content-box {
flex: 1;
height: 100%;
padding-left: 10px;
background-color: #e6e6e6;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
background-color: #fff;
overflow-y: auto;
}
</style>
</head>
<body>
<div class="window">
<div class="header">
header
</div>
<div class="main">
<div class="aside">
<p>测试内容</p>
</div>
<div class="content-box">
<div>
当前位置：面包屑>面包屑
</div>
<div class="content">
<p>测试内容1</p>
<p>测试内容100</p>
</div>
</div>
</div>
<div class="footer">
footer
</div>
</div>
</body>
</html>
注意事项
- html和body的height属性设置为100%；
- main的overflow-y属性设置为hidden;aside和content的overflow-y属性设置为scroll；
