css 实现头部底部中间三栏布局
实现
【css 实现头部底部中间三栏布局】
文章图片
1. flex 布局
flex 弹性布局，更灵活的去实现多种形式的布局，目前在移动端、pc端都有较大的应用，不足ie支持10+1.1 html
HeaderLeft
Center
RightFooter
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部分
mian部分使用calc动态计算最小高度，使得main最小高度为视图高度 - （header+footer）vh相对于视口的高度。视口被均分为100单位的vh
通过代码我们能看到，这里主要用了flex布局及calc，vh，总的来说如果不要兼容ie9及以下，采用flex是比较适合的布局，较少的代码就可以实现我们想要的布局方式
- flex
文章图片
- calc
文章图片
- vh
文章图片
https://codepen.io/xiaofute/p...
2. float 实现 2.1 html
2.2 css
2.3 兼容性
2.4 完整代码
https://codepen.io/xiaofute/p...
推荐阅读
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树
- 人脸识别|【人脸识别系列】| 实现自动化妆
- paddle|动手从头实现LSTM