定制高端网站/汉川seo推广
四种方式
element-ui布局容器(el-container)
element-ui布局(el-row、el-col)
绝对定位(absolute)
浮动(float)
比如想要做这样一个布局，有哪几种方式。
TIM图片20190513111605.png
1. element-ui布局容器
最简单、最快捷的方式。
Header
Aside
Footer
element-ui提供的布局容器，el-header头标签，有height属性。el-aside左侧边栏标签，有width属性。el-footer底部标签，有height属性。其他样式可以通过class进行控制。
2. element-ui布局
相对简单的方式。
header
aside
main
footer
利用el-col将每行分为24等分的特性，进行布局。其他属性通过class进行控制。
3. 浮动
原生css布局的方式，float布局，也是最基础的方式。
-- html --
.header {
background-color: blue;
height: 66px;
}
.sideBar {
background-color: red;
width: 200px;
float: left;
height: calc(100vh - 132px);
}
.main {
background-color: green;
width: calc(100vw - 200px);
float: right;
height: calc(100vh - 132px);
}
.footer {
height: 66px;
background-color: yellow;
float:left;
width: 100vw;
}
将aside向左浮动，固定好宽度。main向右浮动，注意固定好宽度是 100vw - 左侧边栏的宽度，注意高度是 100vh - 上下header和footer高度之和。footer也由于浮动而被挤到到最下面，这边指定float为left、right都是可以的，都可以达到浮动到最下方的效果。
4.绝对定位
原生css布局的方式，position布局，也是最基础的方式。
.header {
background-color: blue;
height: 66px;
}
.sideBar {
background-color: green;
width: 200px;
position: absolute;
height: calc(100vh - 132px);
}
.main {
background-color: red;
width: calc(100vw - 200px);
height: calc(100vh - 132px);
margin-left: 200px;
}
.footer {
background-color: yellow;
height: 66px;
position: fixed;
bottom: 0;
width: 100vw;
}
sideBar设置好宽度，利用绝对定位将固定在最左边(由于是绝对定位，所以注意已经脱离了文档流)。main设置margin-left为侧边栏宽度，这样就可以使得main不会被遮挡。footer设置为固定定位，bottom为0固定在底部。其他height、width的值也要注意计算哦~