共 3 条评论关于"未知宽高不满一屏footer固定在底部-不完美中的完美"
最新评论
需求:头部,中间容器,底部三块内容宽高不固定,内容不确定,如何让在中间内容不能撑满一屏幕时候底部固定在屏幕下面,足够一屏幕时候跟随文档流自由滚动?这个问题是个很老的问题了,多年以来似乎没有十全十美的办法,不过最近发现一种近似于完美方式,分享给大家,主要用弹性盒子特性来做的,PC端低版本浏览器慎用。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } html, body { height: 100%; } body { display: flex; // 划重点 flex-direction: column; // 划重点 color: #fff; } header { width: 100%; height: 60px; flex-shrink: 0; // 划重点 box-sizing: border-box; background: #ccc; color:#000; } section { flex-grow: 1; // 划重点 background: #334455; } section ul li { float: left; } footer { width: 100%; height:100px; background: burlywood } </style> </head> <body> <header>header</header> <section> section </section> <footer> footer </footer> </body> </html> |
下一篇:Es6中padStart()、padEnd()字符串补位方法
最新评论
支付宝扫一扫打赏
微信扫一扫打赏
这里主要是用了flex-grow属性吗?当子盒子高度小于父盒子高度时占据了父盒子剩余的空间,flex-shrink值为0,保证header不减小。
@鲸鱼对的,记得还要留意下header中的flex-shrink属性
学习了