让页面footer任何情况下都沉底显示的绝佳方法（亲试有效）

最新推荐文章于 2024-05-06 09:50:00 发布

ljw_Josie

最新推荐文章于 2024-05-06 09:50:00 发布

阅读量2k

点赞数 2

分类专栏： web前端取经路上 CSS3

本文链接：https://blog.csdn.net/ljw_Josie/article/details/71087271

版权

web前端取经路上同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

CSS3

7 篇文章 0 订阅

订阅专栏

原文： Quick Tip: The Best Way To Make Sticky Footers

问题：在布局网页的时候时常遇到页面内容太少，网页撑不开导致footer浮上去。非常不美观，网上各种说法，说是position:absolute;或者position:fixed；都不能满足我的需求（body内容少的时候），也许是我方法不对吧（自嘲ing···）

解决办法：

最好方法是采用 flexbox——CSS3提供的一种先进布局模型，旨在建立具有适应性的布局。如果你对 flexbox 还不怎么熟悉，文章最后有一些扩展阅读链接，可以帮助你了解 flexbox。
我们的演示页面应该具备 Header、主体内容区域和 Footer，下面是该页面的 HTML

<body>
    <header>...</header>
    <section class="main-content">...</section>
    <footer>...</footer>
</body>

为了启用 flex模式，我们将 body 的 display 属性设置为 flex, 然后将方向属性设置为列, （默认是行，也就是横向布局）。同时，将html 和 body 元素的高度设置为100%，使其充满整个屏幕。(记住，这里一定是body，而不是自己添加的一个包裹全局的class哦)

html{
    height: 100%;
 }
body{
  display: flex;
  flex-direction: column;
  height: 100%;
}

现在，我们需要调整各个区域占用的页面空间，我们将通过flex 属性来达到这一目的，该属性实际包含了三个属性，分别是：
flex-grow：元素在同一容器中对可分配空间的分配比率，及扩展比率
flex-shrink：如果空间不足，元素的收缩比率
flex-basis：元素的伸缩基准值
我们希望 header 和footer 只占用他们应该占用的空间，将剩余的空间全部交给主体内容区域

header{
    /* 我们希望 header 采用固定的高度，只占用必须的空间 */
    /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
    flex: 0 0 auto;
  }
  .main-content{
    /* 将 flex-grow 设置为1，该元素会占用所有的可使用空间
     而其他元素该属性值为0，因此不会得到多余的空间*/
    /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
    flex: 1 0 auto;
  }
  footer{
    /* 和 header 一样，footer 也采用固定高度*/
    /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
    flex: 0 0 auto;
  }

demo 页面地址： http://demo.tutorialzine.com/2016/03/quick-tip-the-best-way-to-make-sticky-footers/

结论

如你说见，如果是从零开始构建布局，flexbox 将会是你的得力助手。除了极少数的例外，所有的主流浏览器都支持 flexbox，就 IE 来说，IE9以后的版本都是支持的。

ljw_Josie

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
让页面footer任何情况下都沉底显示的绝佳方法（亲试有效）

原文： Quick Tip: The Best Way To Make Sticky Footers问题：在布局网页的时候时常遇到页面内容太少，网页撑不开导致footer浮上去。非常不美观，网上各种说法，说是position:absolute;或者position:fixed；都不能满足我的需求（body内容少的时候），也许是我方法不对吧（自嘲ing···）解决办法：最好方法是采用
复制链接

扫一扫