实现
1. flex 布局
flex 弹性布局,更灵便的去实现多种形式的布局,目前在挪动端、pc 端都有较大的利用,有余 ie 反对 10+
1.1 html
<div class="content">
<div class="header">Header</div>
<div class="main">
<div class="left">Left</div>
<div class="center">Center</div>
<div class="right">Right</div>
</div>
<div class="footer">Footer</div>
</div>
1.2 css
.content div {display: flex;}
.header,.footer {
height: 60px;
background: #b2bec3;
}
.main {
/*Firefox*/
min-height: -moz-calc(100vh - 150px);
/*chrome safari*/
min-height: -webkit-calc(100vh - 150px);
/*Standard */
min-height: calc(100vh - 150px);
align-items: flex-start;
}
.main .left,
.main .right {
width: 200px;
background: #dfe6e9;
}
.main .center {
background: #dfe6e9;
margin: 0 20px;
flex-grow: 1;
}
.footer {margin-top: 30px;}
1.2.1 flex-grow 实现 center 自适应
- flex 布局实现两头局部的三栏布局
- grow 属性定义我的项目的放大比例,默认为 0,存在残余不放大(
left、center
),center 为 1,也就是 main 局部,除了left right
后均为 center 局部
1.2.2 calc、vh 实现 footer 居底
mian
局部应用 calc 动静计算最小高度,使得 main 最小高度为视图高度 -(header+footer)
vh
绝对于视口的高度。视口被均分为 100 单位的 vh
1.3 兼容性
通过代码咱们能看到,这里次要用了
flex
布局及calc
,vh
,总的来说如果不要兼容 ie9 及以下,采纳 flex 是比拟适宜的布局,较少的代码就能够实现咱们想要的布局形式
- flex
- calc
- vh
1.4 残缺代码
https://codepen.io/xiaofute/p…
2. float 实现
2.1 html
2.2 css
2.3 兼容性
2.4 残缺代码
https://codepen.io/xiaofute/p…