Sticky footers实现套路

sushi 发布于2019-08-29 11:33 / 3194人阅读

摘要：第二种方式首先提一个概念相对于视窗的高度视窗高度是。这种需求刚好符合。提供一种增加包裹层实现方式。

无论是pc还是移动端，有一种布局叫做Sticky footers，何为Sticky footers？百度翻译：“粘粘的页脚”[笑哭],
不过意思也算对吧，就是如果页面内容不够长的时候，页脚粘贴在视窗底部；如果内容足够长时，页脚块会附在内容区块下面。那么如何来实现这种效果呢，今天来用两种方式聊一聊。

实现原理

1.利用包裹层，用高度100%来实现
2.利用flex + 高度100vh来实现

第一种方式

设置body的高度为100%，然后设置设置内容容器的最小高度为100%，然后设置负的margin-bottom，负值为页脚高度，然后利用伪类，利用容器的after占位。

html,body {
    height: 100%;
}
.page-wrap{
    min-height: 100%;
    margin-bottom: -142px;
}
.page-wrap:after {
    content: "";
    display: block;
}
footer,.page-wrap:after {
    height: 142px;
}
----------------------------------

第二种方式

首先提一个概念：vh ：相对于视窗的高度：视窗高度是100vh。
将body设置为 display:flex; 这时你会发现页面的布局变成了横向布局，因为flex布局默认主轴方向为 row ，即横向。然后利用 flex-flow: column; 将主轴方向设置为垂直方向。关于flex的语法，推荐阮一峰老师的blogFlex 布局教程：语法篇,
然后设置内容容器flex: 1。

这里稍微介绍一下flex: 1
flex: 1 等同于 flex: 1 1 0%,即等价于flex-grow: 1; flex-shrink: 1;flex-basis: 0%;前两个根据阮老师的教程很好理解，那么第三个flex-basis: 0%是什么意思呢？
flex-basis有三种取值情况：

1.auto: 先检索该元素的尺寸，如果不为auto，则取固定值；如果也是auto，则取值content
2.content: 指该元素的内容自动布局。
3.百分比: 根据其父容器的尺寸计算。如果父容器的尺寸未定义，则取值和设为auto相同。

所以，设置为 flex: 1 之后，内容容器内容高度小于父容器时，则取父容器高度，如果大于父容器高度时则取内容高度。

理解了上面这些之后，下面是实现的一个简单例子。

body{
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}
main {
    flex: 1;
}
-----------

移动端实现

在开发移动端时，可能会有点击某个按钮，显示全屏遮罩层，如果内容过多，则出现滚动条，关闭按钮在最下面。这种需求刚好符合Stciky footers。遮罩层，我们一般常使用fix布局。提供一种增加包裹层实现方式。
遮罩层position:fixed，然后包裹层最小高度设为min-height: 100%，内容容器设置padding-bottom: 30px页脚提供位置。页脚采用margin-top: -30px来定位，同时注意清除浮动的使用。

.parent {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}
.main-wrapper {
    width: 100%;
    min-height: 100%;
}
.main {
    padding-bottom: 30px;
}
.footer    {
    height: 30px;
    width: 100%;
    position: relative;
    margin-top: -30px;
    clear: both;
}
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
-------------------

    
        
            123
        
    
    
        123

有更多实现技巧或建议，欢迎留言交流~
博客原文:(http://fehey.com/2016/11/20/s...

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

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

css中底部sticky footer

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

wenzi 2019-08-29 14:11 评论0 收藏0
前端经典布局：Sticky footer 布局

摘要：使用布局达到了预期的效果，及时内容区较少，页脚区块也是固定在底部。二布局方式代码这种方法就是利用布局对视窗高度进行分割。什么是Sticky footer布局？前端开发中大部分网站，都会把一个页面分为头部区块、内容区块、页脚区块，这也是比较。往往底部都要求能固定在屏幕的底部，而非随着文档流排布。要实现的样式可以概括如下：如果页面内容不够长的时候，页脚区块在屏幕的底部；如果内容足够长的时...

JerryWangSAP 2019-08-02 10:35 评论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