CSS Sticky Footer

wemall 发布于2019-08-30 15:52 / 3286人阅读

摘要：这样下来我们就可以测试代码了，然后发现如果内容多到一定程度之后小叉虽然被挤出屏幕外了，但是却挡在了文字前面，所以我们这里在里面的内容器加上了一个这样文字就不会再被挡住了。

最近碰巧再看网上那一套火的不得了的高仿饿了么的视频，正巧看到一个css技巧，看了一下觉得挺简单，但是却又非常精髓，而平时公司项目和自己练手的项目里面都没有这样的需求，在这里就简单的讲述一下这个技巧（你就当我在这里做个笔记行不行）。

什么是 sticky footer

我们看到上图，就是我们需要在实现一个小叉一直停留在页面底部，当页面内容少于一屏的时候，这个小叉会被停留在页面底部，当页面内容大于一屏的时候可以吧这个小叉挤下去，而不至于让小叉被停留在页面底部而遮挡住内容，所以在这种地方使用fixed显然并没有那么合适。

下面我们就开始一起实现这个功能

首先是布局

其中wrapper为整个初始容器，wrapper-main-content为文字放置容器，下面是css

      *{
            padding:0;
            margin: 0;
        }
        html,body,.wrapper{
            box-sizing: border-box;
            width: 100%;
            height: 100%;
        }
        .wrapper-main{
            width: 900px;
            margin: auto;
            min-height: 100%;
        }
        .wrapper-main .wrapper-main-content{
            padding: 0 0 50px 0;
        }
        .wrapper-close{
            width: 900px;
            margin: -50px auto 0;
            text-align: center;
            line-height: 50px;
        }

将跟小X同级的wrapper-main设置min-height:100%;这样就可以让容器满屏，但是这样一来wrapper-close就会被挤出屏外，所以这里我们使用了margin-top: -50px通过margin负值来实现向上偏移正好可以被填充到整个wrapper-main的底部，而wrapper-main高度又是100%，所以正好来到了屏幕的底部。

这样下来我们就可以测试代码了，然后发现如果内容多到一定程度之后小叉虽然被挤出屏幕外了，但是却挡在了文字前面，所以我们这里在main里面的内容器加上了一个padding-bottom：50px;这样文字就不会再被挡住了。这里的关键是margin负值起到了向上偏移的作用，具体原理请移步相关margin负值教学，这里不再赘述。

GPU云服务器云服务器 CSS Sticky footer，css Sticky footer

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

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

css中底部sticky footer

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

wenzi 2019-08-29 14:11 评论0 收藏0
8个有用的 CSS 技巧:视差图像，sticky footer 等等

摘要：在本文中，我将分享一些有用的技巧和技巧，它们代表了我在学习过程中的关键进展。当用户将鼠标悬停在上面时，图像会稍微放大，但其尺寸保持不变。为了达到这个效果，需要用标签包裹标签。的范围是从到，其中从白色变为黑色。 CSS是一种独特的语言。乍一看，这似乎很简单,但是，某些在理论上看起来很简单的效果在实践中往往不那么明显。在本文中，我将分享一些有用的技巧和技巧，它们代表了我在学习CSS过程中...

Godtoy 2019-08-23 16:23 评论0 收藏0
8个有用的 CSS 技巧:视差图像，sticky footer 等等

摘要：在本文中，我将分享一些有用的技巧和技巧，它们代表了我在学习过程中的关键进展。当用户将鼠标悬停在上面时，图像会稍微放大，但其尺寸保持不变。为了达到这个效果，需要用标签包裹标签。的范围是从到，其中从白色变为黑色。 CSS是一种独特的语言。乍一看，这似乎很简单,但是，某些在理论上看起来很简单的效果在实践中往往不那么明显。在本文中，我将分享一些有用的技巧和技巧，它们代表了我在学习CSS过程中...

Rango 2019-08-30 15:43 评论0 收藏0
Sticky Foolter 几种实现方式

摘要：但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。只需要几行代码就可以实现，而且像上面计算或添加额外的元素。 CSS实现Sticky Footer 什么是 Sticky Footer 所谓 Sticky Footer，并不是什么新的前端概念和技术，它指的就是一种网页效果：如果页面内容不足够长时，页脚固定在浏览器窗口的底部；如果内容足够长时，页脚固定在页面的最底部。但如果网页内...

张汉庆 2019-08-30 11:03 评论0 收藏0
Sticky Foolter 几种实现方式

摘要：但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。只需要几行代码就可以实现，而且像上面计算或添加额外的元素。 CSS实现Sticky Footer 什么是 Sticky Footer 所谓 Sticky Footer，并不是什么新的前端概念和技术，它指的就是一种网页效果：如果页面内容不足够长时，页脚固定在浏览器窗口的底部；如果内容足够长时，页脚固定在页面的最底部。但如果网页内...

PrototypeZ 2019-08-02 15:13 评论0 收藏0