当前位置: 首页 > Web前端 > HTML5

Footer部分永远沉到底部

时间:2023-04-05 00:01:17 HTML5

那么如何将网页的“页脚”部分永远固定在页面底部呢?(注意这里说的是footer一直固定在页面底部,不是一直固定在显示器屏幕底部)  的意思是当内容只有一点点的时候,网页是显示在浏览器底部,当内容高度超过浏览器高度时,网页的页脚部分位于页面底部。简而言之,网页的页脚部分始终位于页面底部,即页脚部分始终下沉到底部。方法 1。HTML结构:

  • 内容
 2.CSS代码:*{padding:0;保证金:0;列表样式:无;}html,body{高度:100%;}#container{高度:100%;背景色:红色;溢出-x:隐藏;}.content{位置:相对;最小高度:100%;背景色:黄色;填充底部:70px;框大小:边框框;}.footer{位置:绝对;左:0;底部:0;宽度:100%;高度:70px;背景颜色:蓝色;}
  • 内容
原理和标签:html和body标签中的高度(height)必须设置为“100%”,这样我们就可以在容器上设置百分比高度,同时需要设置themarginandpaddingofhtmlandbodyRemove,即html和body的margin和padding都为0。div#container容器:div#container容器设置高度(height)为“100%”;overflow-x:hidden;,让内容可以在container容器中滚动。div.content容器:div.content容器必须设置一个最小高度(min-height)为100%,主要是让他在内容很少(或者没有内容)的时候保持100%的高度。另外,我们还需要在div.content容器中设置一个“position:relative”,让里面的元素可以绝对定位。另外就是设置一个padding-bottom值,这个值应该等于(或者略大于)页脚div.footer的高度(height)值。div.footer容器:div.footer容器必须有一个固定的高度。div.footer也需要绝对定位,设置bottom:0让div.footer固定在容器div.content的底部。这样就可以达到我们前面提到的效果了。当内容只有一点时,div.footer固定在屏幕底部(因为div.content设置了min-height:100%)。当内容的高度超过屏幕高度时,div.footer也会固定在div.content的底部,即页面底部。