美文网首页LiYajie web前端
web前端-Sticky Footer布局

web前端-Sticky Footer布局

作者: LiYajie | 来源:发表于2017-02-27 11:32 被阅读176次

什么是Sticky Footer布局

Sticky Footer布局实现的效果是, 当页面中的内容高度小于屏幕高度的时候, 让底部div绝对定位在底部, 当内容高度大于屏幕高度的时候, 底部div会紧随内容其后, 效果如下:

内容高度小于屏幕高度

当内容高度大于屏幕高度的时候, 效果如下:

内容高度大于屏幕高度

只有滚动到最后才能看到底部div

代码实现:

<body>
    <div class="container">
        <p>我是内容</p>
    </div>
    <footer class="footer">
        我是底部
    </footer>
</body>
*{margin: 0;}
html,body{
    height: 100%;
}
.container{
    min-height: 100%;
    margin-bottom: -100px;
    background-color: #0094ff;
}
.footer{
    background-color: #2AEB2B;
}
.container::after{
    content: '';
    display: block;
}
.footer,.container::after{
    height: 100px;
}

原理

当我们设置.container的下面的外边距为负的时候, 下面相邻的元素自然就会向上移动对应的距离, 这样效果就有了, 但是内容还是会溢出覆盖到底部的元素上 , 所以要加一个距离, 所以给.container 的 :after设置相同的高度, 我们也可以在.container中添加一个div, 设置这个div的高度和.footer的高度一样即可.

以上是我的理解, 如有错误, 请大神指正.

相关文章

  • web前端-Sticky Footer布局

    什么是Sticky Footer布局 Sticky Footer布局实现的效果是, 当页面中的内容高度小于屏幕高度...

  • sticky-footer布局的方法

    一、什么是sticky-footer布局?sticky-footer布局是一种经典的布局效果,可概况如下:如果页面...

  • sticky footer布局

    实例 套路 一个展示内容content的容器wrapper 一个展示footer的容器 wrapper设置最小高度...

  • sticky footer 布局

    在网页设计中,sticky footer设计是最古老的和常见的效果之一,大多数人都应该经历过。它可以概括如下:当页...

  • sticky footer 布局

    一、stick footer 布局介绍 文档包括内容区与页脚区。当内容高度未达到视口的高,页脚一直在视口最底部。当...

  • Sticky footer布局

    Sticky Footer布局概括如下:如果页面内容不够长的时候,页脚粘贴在视窗底部;如果内容足够长,页脚会被内容...

  • sticky-footer布局

    点对点

  • Sticky-footer 布局

    在一般的页面中,footer应该是置于内容底部,如果内容高度不足,也应该让footer紧贴底部 demo 使用fl...

  • CSS经典布局之Sticky footer布局

    何为Sticky footer布局? 我们常见的网页布局方式一般分为header(页头)部分,content(内容...

  • CSS处理常见问题文章收集

    1、布局类 Sticky Footer : 完美的绝对底部https://aotu.io/notes/2017/0...

网友评论

    本文标题:web前端-Sticky Footer布局

    本文链接:https://www.haomeiwen.com/subject/wzhzwttx.html