sticky footer 布局

一、stick footer 布局介绍

文档包括内容区与页脚区。当内容高度未达到视口的高,页脚一直在视口最底部。当内容高度达到或者超出视口的高,页脚一直在内容下方

解决方案

一、calc 目前最主流方案

容器100vh - 页脚的高 (100vh:视口的高)

二、padding-bottom

给body、html设置高度 100%,给内容区设置最小高度 min-height:100%。页脚想在视口显示,则给其margin-top 负的自身高度。(其实页脚是占了内容的自身高度的)为解决内容区高度超过视口高,会与页脚重合问题,给内容区的子元素一个padding-bottom:页脚的高。

三、思路与第二个一样,解决内容区高度超过视口高,会与页脚重合问题:

给内容内部专门一个空子元素让其高度与页脚一致。这样与页脚重合时,在视觉上是没有问题的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Sticky footer布局是什么? 我们所见到的大部分网站页面,都会把一个页面分为头部区块、内容区块和页脚区块...
    陌路黄昏后阅读 489评论 0 7
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,801评论 1 92
  • 1. position: fixed实现 ①顶栏和③底栏都设置position:fixed,分别置于页面的顶部和底...
    自度君阅读 1,118评论 0 2
  • 在网页设计中,sticky footer设计是最古老的和常见的效果之一,大多数人都应该经历过。它可以概括如下:当页...
    放飞吧自我阅读 507评论 0 0
  • 传说中的页脚经典布局,效果图如下,当内容多时会跟随内容移动 写法,容器分两块,一块是detail-wrapper,...
    简单coder阅读 144评论 0 0