HTML固定的底栏(flex布局)
来源:互联网 发布:宝宝早教软件 编辑:程序博客网 时间:2024/05/16 17:22
原文来自:http://liuyanzhao.com/
有时,页面内容太少,无法占满一屏的高度,底栏就会抬高到页面的中间。这时可以采用Flex布局,让底栏总是出现在页面的底部。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #wrapper{width: 1300px; display: flex; min-height: 100vh; /*1vh表示浏览器高度的1%,100vh为浏览器高度,感觉这个挺好的*/ flex-direction: column;/*灵活的项垂直显示*/} #content{flex: 1;} #footer{height: 100px; background-color: black;} </style></head><body> <center> <div id="wrapper"> <div id="header"></div> <div id="content"></div> <div id="footer"></div> </div> </center></body></html>
效果图:
无论content里是否有文字,底栏都会固定在最下面。
原文:http://liuyanzhao.com
0 0
- HTML固定的底栏(flex布局)
- html--三栏布局(两边固定宽度,中间自适应)
- html的自动表格布局和固定表格布局
- 基于flex弹性布局实现“头尾固定,中间滚动”的页面(纯CSS实现)
- 基于flex弹性布局实现“头尾固定,中间滚动”的页面(纯CSS实现)
- flex与布局(基本网格布局、百分比布局、一侧固定一侧自适应、圣杯布局)
- FLEX实现两侧边栏固定中间自适应布局
- Flex布局实现圣杯布局,左右两列固定、中间列自适应的三列式布局
- html与css布局(含flex)
- html练习Flex布局
- HTML+CSS div固定布局
- flex上下固定中间滚动布局
- 布局 固定大小的布局
- 宽度固定的三栏布局
- 一列固定一列自适应布局-flex布局实现
- css 一列固定一列自适应布局-flex布局实现
- css 左边固定宽度,右边自动填充的布局,不用flex
- #笔记 简单使用flex与sticky footer方式解决底部固定在底栏的问题
- 【数据结构与算法】内部排序之三:堆排序(含完整源码)
- 《计算机组成原理》计算机有哪些分类?
- js获取随机数
- maven命令行下载jar包
- 小小创客技术点
- HTML固定的底栏(flex布局)
- Android bitmap实际使用总结
- cocos2dx3.x开启重力感应
- mybaits中的<trim>标签的作用
- R语言面向对象编程
- android拷贝assets目录下文件到其他目录
- dubbo2.5.3升级到dobbo2.8.4(dubbox)遇到的问题
- 【Oracle】 Oracle全文检索功能建立
- 使用Genymotion调试出现错误INSTALL_FAILED_CPU_ABI_INCOMPATI