关闭边栏(ESC)打开边栏(ESC)
这里讨论的底部区域是不用绝对定位的,因为固定的直接用绝对定位就能实现。所以这里说的是除了绝对固定外的一些方法。一般底部区都是放置网站的版权、友情链接、备案信息等,接下来说说有固定高度与没有固定高度的方法。例子中用到的布局如下:
|
<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; } |
支付宝支付
微信支付
打赏

版权声明:本站原创文章,于2017-01-03,由Icss.me发表
转载请注明:网页底部区域固定在最底部 | 爱CSS
相关推荐
-
文本分散二端对齐: text-align:justify;text-justify:inter-ideograph; 用box-shadow阴影…
-
在文章页底部的上下篇文章导航中,有个这样的问题,点击的有效范围只在链接这个小范围上,而不…
-
这二种提示框的效果挺好看的,记录一下吧,现在改用的是拟物化的效果,有点立体感,之前用的这…
-
因此我们如果不想用 Fontawesome 提供的类,只想在 css 里面引用图标的话,可以这样子,这样可…
-
本文介绍CSS动画的两大组成部分:transition和animation。这篇文章只是一个简介,帮助初学者了…
-
HTML编码规范: 使用小写元素名:<session> 关闭所有HTML元素:<p></p>…