CSS实现Footer置底的方法有哪些

这篇文章主要介绍了CSS实现Footer置底的方法有哪些的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇CSS实现Footer置底的方法有哪些文章都会有所收获，下面我们一起来看看吧。
　　页脚置底（Sticky footer）就是让网页的footer部分始终在浏览器窗口的底部。当网页内容足够长以至超出浏览器可视高度时，页脚会随着内容被推到网页底部；但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。
　　1、将内容部分的底部外边距设为负数
　　这是个比较主流的用法，把内容部分最小高度设为100%，再利用内容部分的负底部外边距值来达到当高度不满时，页脚保持在窗口底部，当高度超出则随之推出的效果。
　　
　　
　　content
　　
　　
　　

　　
　　html, body {
　　height: 100%;
　　margin: 0;
　　}
　　.wrapper {
　　min-height: 100%;
　　/* 等于footer的高度 */
　　margin-bottom: -50px;
　　}
　　.footer,
　　.push {
　　height: 50px;
　　}
　　这个方法需要容器里有额外的占位元素（如.push）
　　需要注意的是.wrapper的margin-bottom值需要和.footer的负的height值保持一致，这一点不太友好。
　　2、将页脚的顶部外边距设为负数
　　既然能在容器上使用负的margin bottom，那能否使用负margin top吗？当然可以。
　　给内容外增加父元素，并让内容部分的底部内边距与页脚高度的值相等。
　　
免费云主机域名　　
　　
　　content
　　
　　
　　

　　
　　html, body {
　　height: 100%;
　　margin: 0;
　　}
　　.content {
　　min-height: 100%;
　　}
　　.content-inside {
　　padding: 20px;
　　padding-bottom: 50px;
　　}
　　.footer {
　　height: 50px;
　　margin-top: -50px;
　　}
　　不过这种方法和上一种一样，都需要额外添加不必要的html元素。
　　3、使用calc()设置内容高度
　　有一种方法不需要任何多余元素——使用CSS3新增的计算函数calc()
　　这样元素间就不会有重叠发生，也不需要控制内外边距了——
　　
　　
　　content
　　
　　

　　
　　.content {
　　min-height: calc(100vh – 70px);
　　}
　　.footer {
　　height: 50px;
　　}
　　可能你会疑惑内容高度calc()中为什么减去70px，而不是footer的高度50px，因为假设俩元素有20px的间距，所以70px=50px+20px
　　不过，你不必在意这些——
　　4、使用flexbox弹性盒布局
　　以上三种方法的footer高度都是固定的，通常来说这不利于网页布局：内容会改变，它们都是弹性的，一旦内容超出固定高度就会破坏布局。所以给footer使用flexbox吧，让它的高度可以变大变小变漂亮——（≧∇≦）
　　
　　
　　content
　　
　　

　　
　　html {
　　height: 100%;
　　}
　　body {
　　min-height: 100%;
　　display: flex;
　　flex-direction: column;
　　}
　　.content {
　　flex: 1;
　　}
　　你还可以在上面添加header或在下面添加更多元素。可从以下技巧选择其一：
　　flex ： 1 使内容（如：.content）高度可以自由伸缩
　　margin-top： auto
　　5、使用Grid网格布局
　　grid比flexbox还要新很多，并且更佳很简洁
　　
　　
　　content
　　
　　

　　
　　html {
　　height: 100%;
　　}
　　body {
　　min-height: 100%;
　　display: grid;
　　grid-template-rows: 1fr auto;
　　}
　　.footer {
　　grid-row-start: 2;
　　grid-row-end: 3;
　　}
　　遗憾的是，网格布局（Grid layout）目前仅支持Chrome Canary和Firefox Developer Edition版本。关于“CSS实现Footer置底的方法有哪些”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“CSS实现Footer置底的方法有哪些”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注百云主机行业资讯频道。

相关推荐: MySQL中什么情况下进行sql优化

这篇文章主要介绍MySQL中什么情况下进行sql优化，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！性能低、执行时间太长、等待时间免费云主机域名太长、连接查询、索引失效。（1）编写过程（2）解析过程索引相当于书的目录。索引的数据结构是B+…