分享更有价值
被信任是一种快乐

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置底的方法有哪些”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注云技术行业资讯频道。

相关推荐: JavaScript怎么快速关闭

这篇“JavaScript怎么快速关闭”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“JavaScript怎么快速关闭”文章吧。 免费云主机、域名…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册