前端经典布局：Sticky footer 布局

JerryWangSAP 发布于2019-08-02 10:35 / 1726人阅读

摘要：使用布局达到了预期的效果，及时内容区较少，页脚区块也是固定在底部。二布局方式代码这种方法就是利用布局对视窗高度进行分割。

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

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

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

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

其中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代码


    
      // 这里是页面内容
      


    // 这里是footer的内容

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元素的高度，且结构相对较复杂。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52451.html

使用 flex 实现 5 种常用布局

摘要：原文链接经典的上中下布局。左边是定宽，右边是上中下布局。还是上中下布局，区别是固定在顶部，不会随着页面滚动。左侧固定在左侧且与视窗同高，当内容超出视窗高度时，在内部出现滚动条。左右两侧滚动条互相独立。原文链接 Sticky Footer 经典的上-中-下布局。当页面内容高度小于可视区域高度时，footer 吸附在底部；当页面内容高度大于可视区域高度时，footer 被撑开排在 co...

thursday 2019-08-29 13:57 评论0 收藏0
前端必懂之Sticky Footer(粘性页脚)

摘要：写在最前是的一种布局场景。页脚永远固定在页面的底部，页面内容不够长的时候页脚黏在视窗底部，内容足够长时会被向下移动。老式门户网站由于内容过短常常版权页脚前移，移动端特定布局也需要来解决这些问题。 showImg(https://segmentfault.com/img/bVbrIV9?w=200&h=354); 写在最前：Sticky Footer是css的一种布局场景。页脚foot...

piapia 2019-08-02 16:14 评论0 收藏0
前端必懂之Sticky Footer(粘性页脚)

摘要：写在最前是的一种布局场景。页脚永远固定在页面的底部，页面内容不够长的时候页脚黏在视窗底部，内容足够长时会被向下移动。老式门户网站由于内容过短常常版权页脚前移，移动端特定布局也需要来解决这些问题。 showImg(https://segmentfault.com/img/bVbrIV9?w=200&h=354); 写在最前：Sticky Footer是css的一种布局场景。页脚foot...

jifei 2019-08-29 18:42 评论0 收藏0
css中底部sticky footer

摘要：设计是最古老和最常见的效果之一，它可以概括如下如果页面内容不够长的时候，页脚块粘贴在视窗底部如果内容足够长时，页脚块会被内容向下推送。所有内容区好，方法一也比较推荐，以上就是个人对的理解 Sticky footers设计是最古老和最常见的效果之一，它可以概括如下： 1 如果页面内容不够长的时候，页脚块粘贴在视窗底部； 2 如果内容足够长时，页脚块会被内容向下推送。出现问题如图：sho...

wenzi 2019-08-29 14:11 评论0 收藏0