好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

Stickyfooter布局是什么?

Sticky footer布局是什么?

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

图示说明

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

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

Sticky footer布局效果如下图

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

实现方式

负margin布局方式

html代码:

<div class="wrapper clearfix"><div class="content">  // 这里是页面内容</div>  </div><div class="footer">// 这里是footer的内容</div> 

查看更多关于Stickyfooter布局是什么?的详细内容...

  阅读:42次