Sticky footer

àì夳堔傛蜴生んèń 2022-03-16 06:48 248阅读 0赞

Sticky footer布局是什么？

我们所见到的大部分网站页面，都会把一个页面分为头部区块、内容区块和页脚区块，当头部区块和内容区块内容较少时，页脚能固定在屏幕的底部，而非随着文档流排布。当页面内容较多时，页脚能随着文档流自动撑开，显示在页面的最底部，这就是Sticky footer布局。

图示说明

  • 当内容较少时，正常的文档流效果如下图

正常文档流.jpg

在正常的文档流中，页面内容较少时，页脚部分不是固定在视窗底部的，这时就要用到Stickyfooter布局。

  • Sticky footer布局效果如下图

Sticky footer布局.jpg

这样就符合我们的预期效果，可以看出Sticky footer布局的应用场景还是非常广泛的。

实现方式

负margin布局方式

html代码：

  1. <div class="wrapper clearfix">
  2.     <div class="content">
  3.       // 这里是页面内容
  4.     </div>  
  5. </div>
  6. <div class="footer">
  7.     // 这里是footer的内容
  8. </div>

css代码：

  1. .wrapper {
  2.     min-height: 100%;
  3. }
  5. .wrapper .content{
  6.     padding-bottom: 50px; /* footer区块的高度 */
  7. }
  9. .footer {
  10.     position: relative;
  11.     margin-top: -50px;  /* 使footer区块正好处于content的padding-bottom位置 */
  12.     height: 50px;
  13.     clear: both;
  14. }
  16. .clearfix::after {
  17.     display: block;
  18.     content: ".";
  19.     height: 0;
  20.     clear: both;
  21.     visibility: hidden;
  22. }

注意:content元素的padding-bottom、footer元素的高度以及footer元素的margin-top值必须要保持一致。

这种负margin的布局方式，是兼容性最佳的布局方案，各大浏览器均可完美兼容，适合各种场景，但使用这种方式的前提是必须要知道footer元素的高度，且结构相对较复杂。

flex布局方式

html代码：

  1. <div class="wrapper">
  2.     <div class="content">这里是主要内容</div>
  3.     <div class="footer">这是页脚区块</div>  
  4. </div>

css代码：

  1. .wrapper {
  2.     display: flex;
  3.     flex-direction: column;
  4.     min-height: 100vh;
  5. }
  6. .content {
  7.     flex: 1;
  8. }
  9. .footer {
  10.     flex: 0;
  11. }

这种布局方式结构简单，代码量少，也是较为推荐的布局方式。

小结

Sticky footer布局是十分常见的一种页面布局形式，实现的方法也比较多，以上两种方法最为常用，且基本可以满足所有应用场景。

发表评论

表情：
评论列表 （有 0 条评论，248人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Sticky footer

    Sticky footer布局是什么？ 我们所见到的大部分网站页面，都会把一个页面分为头部区块、内容区块和页脚区块，当头部区块和内容区块内容较少时，页脚能固定在屏幕的底部

    àì夳堔傛蜴生んèńàì夳堔傛蜴生んèń/ 0 赞/ 249 阅读