html底部沉底显示,Footer部分永远沉底。

那么如何将Web页面的 “footer”部分永远固定在页面的底部呢？(注意了这里所说的是页脚footer永远固定在页面的底部，而不是永远固定在显示器屏幕的底部)

就是当内容只有一点点时，Web页面显示在浏览器底部，当内容高度超过浏览器高度时，Web页面的footer部分在页面的底部，总而言之Web页面的footer部分永远在页面的底部，也就是，Footer部分永远沉底。

方法

1. HTML结构：

• 内容

2. CSS代码：

* {

padding: 0;

margin: 0;

list-style: none;

}

html,

body {

height: 100%;

}

#container {

height: 100%;

background-color: red;

overflow-x: hidden;

}

.content {

position: relative;

min-height: 100%;

background-color: yellow;

padding-bottom: 70px;

box-sizing: border-box;

}

.footer {

position: absolute;

left: 0;

bottom: 0;

width: 100%;

height: 70px;

background-color: blue;

}

• 内容

原理

和

标签：html和body标签中必须将高度(height)设置为“100%”,这样我们就可以在容器上设置百分比高度。同时需要将html,body的margin和padding都移除，也就是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底部，也就是固定在页面的底部。