关闭边栏(ESC)打开边栏(ESC)
这里讨论的底部区域是不用绝对定位的,因为固定的直接用绝对定位就能实现。所以这里说的是除了绝对固定外的一些方法。一般底部区都是放置网站的版权、友情链接、备案信息等,接下来说说有固定高度与没有固定高度的方法。例子中用到的布局如下:
1 2 3 4 5 6 7 8 |
<body> <main> <p>这是主体部分</p> </main> <footer> <p>Copyright © 2016-2017 阿乞 - Icss.me / 版本 V 1.52 </p> </footer> </body> |
一、有固定高度,用min-height的方法来设定,为了效果准确,得先清除body的margin与padding,并且设置body的高度为100%,这种方式用在网页结构比较简单的页面。:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
* { margin: 0; padding: 0 } html, body { height: 100% } main { min-height: calc(100% - 100px) } footer { height: 100px; line-height: 100px; background: #000; color: #999; text-align: center; } |
二、不知底部区的高度的情况下,使得伸缩盒吧,太牛了这个。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
* { margin: 0; padding: 0 } html, body { height: 100%; } /*在父元素中设置flex与行排列*/ body { display: flex; flex-flow:column; } /*设置flex大于0就可以分开*/ main { flex: 1 } footer { padding: 30px; background: #000; color: #999; text-align: center; } |