文档包括内容区与页脚区。当内容高度未达到视口的高，页脚一直在视口最底部。当内容高度达到或者超出视口的高，页脚一直在内容下方
解决方案
一、calc 目前最主流方案
容器100vh - 页脚的高 （100vh:视口的高）
二、padding-bottom
给body、html设置高度 100%，给内容区设置最小高度 min-height：100%。页脚想在视口显示，则给其margin-top 负的自身高度。（其实页脚是占了内容的自身高度的）为解决内容区高度超过视口高，会与页脚重合问题，给内容区的子元素一个padding-bottom：页脚的高。
三、思路与第二个一样，解决内容区高度超过视口高，会与页脚重合问题：
给内容内部专门一个空子元素让其高度与页脚一致。这样与页脚重合时，在视觉上是没有问题的。
什么是Sticky Footer布局 Sticky Footer布局实现的效果是, 当页面中的内容高度小于屏幕高度...
一、什么是sticky-footer布局？sticky-footer布局是一种经典的布局效果，可概况如下：如果页面...
实例 套路 一个展示内容content的容器wrapper 一个展示footer的容器 wrapper设置最小高度...
在网页设计中，sticky footer设计是最古老的和常见的效果之一，大多数人都应该经历过。它可以概括如下：当页...
一、stick footer 布局介绍 文档包括内容区与页脚区。当内容高度未达到视口的高，页脚一直在视口最底部。当...
Sticky Footer布局概括如下：如果页面内容不够长的时候，页脚粘贴在视窗底部；如果内容足够长，页脚会被内容...
点对点
在一般的页面中，footer应该是置于内容底部，如果内容高度不足，也应该让footer紧贴底部 demo 使用fl...
何为Sticky footer布局？ 我们常见的网页布局方式一般分为header（页头）部分,content（内容...
1、布局类 Sticky Footer : 完美的绝对底部https://aotu.io/notes/2017/0...
本文标题：sticky footer 布局
本文链接：https://www.haomeiwen.com/subject/rmsnjxtx.html
网友评论