css实现让页面的footer始终位于底部

在写html页面布局的时候经常会遇到这样的情况:当页面内容较少的时候footer下面会有留白这样会很不好看,直接给footer,fixed定位的话当页面内容多的时候,footer又会盖住下面的内容。下面介绍几种方法让页面的footer始终位于底部。

方法一:position: absolute; bottom:0; + min-height: 100%;padding-bottom:100px;


"en">

  "UTF-8">
  Document
  


  
"page">
头部
"content">

"内容区">

底部
复制代码

方法二:其实是对方法一做一些改造,html结构和方法一中的一样。


"en">

  "UTF-8">
  Document
  


  
"page">
头部
"content">

"内容区">

底部
复制代码

方法三:使用flexbox布局


"en">

  "UTF-8">
  Document
  


  
"page">
头部
"content">

"内容区">

底部
复制代码

转载于:https://juejin.im/post/5c1077165188251da07e0a81

你可能感兴趣的:(css实现让页面的footer始终位于底部)