前端经典布局：Sticky footer 布局

什么是Sticky footer布局？
前端开发中大部分网站，都会把一个页面分为头部区块、内容区块、页脚区块，这也是比较。往往底部都要求能固定在屏幕的底部，而非随着文档流排布。要实现的样式可以概括如下：如果页面内容不够长的时候，页脚区块在屏幕的底部；如果内容足够长的时候，页脚区块会被内容向下推送。可以以下图展示Sticky footer实现的效果：

在正常的文档流中，页面内容较少的时候，如果不做处理，页脚部分不是固定在视窗底部的。

使用sticky footer布局达到了预期的效果，及时内容区较少，页脚区块也是固定在底部。

实现方式
首先构建简单的布局代码：

<body>

    <div class="content"></div>

    <div class="footer"></div>

</body>

其中content为内容区。方法介绍。
一、为内容区域添加最小高度
这种方法重要用vh(viewpoint height)来计算整体视窗的高度(1vh等于视窗高度的1%),然后减去底部footer的高度，从而求得内容区域的最小高度。例如我们可以添加如下样式：

.content {

    min-height: calc(100vh-footer的高度)

}

此方法需要知道footer的高度，如果高度不确定此方法不推荐。content的高度也可以用百分比来表示。

二、flex布局方式
html代码：

body {

    display: flex;

    flex-flow: column;

    min-height: 100vh;

}

.content {

    flex: 1;

}

.footer{

    flex: 0;

}

这种方法就是利用flex布局对视窗高度进行分割。footer的flex设为0，这样footer获得其固有的高度;content的flex设为1，这样它会充满除去footer的其他部分。

二、负margin布局方式实现
基本构架：
html代码

<div class="wrapper clearfix">

    <div class="content">

      // 这里是页面内容

    </div>

</div>

<div class="footer">

    // 这里是footer的内容

</div>

css代码：

.wrapper {

    min-height: 100%;

}

.wrapper .content{

    padding-bottom: 50px; /* footer区块的高度 */

}

.footer {

    position: relative;

    margin-top: -50px;  /* 使footer区块正好处于content的padding-bottom位置 */

    height: 50px;

    clear: both;

}

.clearfix::after {

    display: block;

    content: ".";

    height: 0;

    clear: both;

    visibility: hidden;

}

需要注意的：content元素的padding-bottom与footer元素的高度以及footer元素的margin-top值必须要保持一致。
这种负margin的布局方式，是兼容性最佳的布局方案，各大浏览器均可完美兼容，适合各种场景，但使用这种方式的前提是必须要知道footer元素的高度，且结构相对较复杂。

巴特西

前端经典布局：Sticky footer 布局

最新文章

热门文章