当前位置：首页 > Web前端 > CSS

StickyFoolter的几种实现方法

时间：2023-03-31 11:22:02 CSS

CSS实现StickyFooter什么是“StickyFooter”所谓“StickyFooter”并不是一个新的前端概念和技术，它指的是一种网页效果：如果内容页面不够长，页脚固定在浏览器窗口底部；如果内容足够长，页脚固定在页面底部。但如果页面内容不够长，底部页脚将保留在浏览器窗口的底部。我们先来看下面这个例子，代码如下top

middlepart

middlepart

中间部分

中间部分

中间部分

中间部分

中间部分

中间部分

中间部分

中间部分

中间部分

中间部分

中间部分

中间部分

中间部分

底部

.header{background-color:#3498DB;高度：50px；行高：50px；文本对齐：居中；颜色：#fff；}.main{溢出：自动；box-sizing:border-box;}.??footer{background-color:#ECF0F1;高度：50px；行高：50px；text-align:center;}细心的读者应该会发现问题，底部的footer位置会随着主要内容的高度自动改变，当主要内容小于视口的高度时，页脚未粘贴在底部。那么如何解决这个问题呢？负边距

中间部分

中间部分

中间部分

中间部分

p>

中间部分

中间部分

中间部分

中间部分

中间部分

中间部分

中间部分

中间部分

中间部分

中间部分

中间部分

中间

中间

中间

中间

中间

中间部分

中间部分

中间部分

中间部分

中间部分

bottom

html,body{height:100%;}.header{背景色：#3498DB；高度：50px；行高:50px;文本对齐：居中；颜色：#fff；位置：固定；宽度：100%；}.main{最小高度：100%；溢出：自动；框大小：边框框；填充底部：50px；填充顶部：50px；margin-bottom:-50px;}.footer{background-color:#ECF0F1;高度：50px；行高：50px；min-heightcalcvhcalc()由CSS3引入，它允许您在声明CSS属性值时执行一些计算。它可以用于某些数值情况；详情请参考MDNvh(ViewportHeight):顾名思义，意思是视口高度的高度。详细信息和兼容性可以在这里找到：caniuse修改上面的代码如下。main{最小高度：calc(100vh-50px-50px);我们必须计算页眉和页脚的高度。这显然并不完美。如果DOM结构中的层次很多，需要计算的内容就更多。absoluteabsolute相信大家都很熟悉，这里就不赘述了；这里只需要注意这个，absolute元素是根据什么位置计算和定位的呢？头部

中间部分

中间部分

中间部分

中间部分

中间部分

中间部分

中间部分

中间

中间

中间

中间

中间

中间

bottom

html{position:relative;最小高度：100%；}body{margin-bottom：50px；}.header{background-color：#3498DB；高度：50px；行高：50px；文本对齐：居中；:#fff;}.main{overflow:auto;}.footer{position:absolute;底部：0；宽度：100%；背景色：#ECF0F1；高度：50px；行高：50px；text-align:center;}代码是不是很简单，这里是position的主要应用：1默认情况下，当一个元素设置为position:absolute，当祖先元素没有设置position:absoluteorfixedorrelative，它的默认值是相对于初始包含块（initialcontainingblock）的。2初始包含块是什么？根元素所在的包含块是一个称为初始包含块的矩形。对于连续媒体，它具有视口的尺寸并锚定在画布原点；这是w3c对包含块的介绍。这段话大致意思是根元素（文档）默认初始化包含块，初始化块的大小就是视口的大小。了解了这些概念之后，再来看上面的代码，就一目了然了！html{位置：相对；最小高度：100%；}body{margin-bottom:50px;}position:relativechange包含一个块来设置要根据html元素定位的绝对元素。min-height：确保当内容不足以显示视口时，可以将页脚粘贴在底部。margin-bottom值是footer元素的高度，这样内容区域就不会被footer覆盖。FlexboxFlexbox是完美的解决方案。它只需要几行CSS代码，并像上面那样计算或添加额外的HTML元素。Flexbox的介绍可以参考阮一峰老师的文章。修改后的代码如下：top

middlepart

Middlepart

中间部分

中间部分

中间部分

中间部分

中间部分

中间部分

中间部分

中间部分

中间部分

中间部分

中间部分

中间部分

中间部分

底部

html,body{height:100%;}.container{display:flex;弹性方向：列；最小高度：100%；}.header{背景色：#3498DB；高度：50px；行高右：50px；文本对齐：居中；颜色：#fff；}.main{溢出：自动；框大小：边框框；flex:1;}.footer{背景色:#ECF0F1;高度：50px；行高：50px；text-align:center;}最终效果如下：negative=margin，固定宽度，absolute都依赖固定的底部高度。一般推荐使用flexbox实现；具体使用可以根据具体场景使用。

上一篇：背景-附件属性分析fixed,local,scroll

下一篇：CSS样式改变——字体设置Font&Border

StickyFoolter的几种实现方法相关文章

最新推荐

猜你喜欢