CSS 实现底部固定

2024-04-27 14:32:19

字体：大中小

来源：转载

供稿：网友

CSS 实现底部固定

　　在制作页面有这样一种现象：当一个HTML页面中含有较少的内容时，Web页面的“footer”部分随着飘上来，处在页面的半腰中间，给视觉效果带来极大的影响，让你的页面看上去很不好看，特别是现在宽屏越来越多，这种现象更是常见。

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

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

方法：

　　1. HTML结构：

<div id="container">    <div id="header">Header Section</div>        <div id="page" class="clearfix">        页面容容部分        </div>    <div id="footer">Footer Section</div></div>

　　实现这页脚永远固定在页面的底部，我们只需要四个div，其中div#container是一个容器，在这个容器之中，我们包含了 div#header（头部），div#page（页面主体部分），div#footer（页脚部分）

　　2. CSS代码：

html,body {  margin: 0;  padding:0;  height: 100%;}#container {  min-height:100%;  height: auto !important;  height: 100%; /*IE6不识别min-height*/  position: relative;}#header {    background: #ff0;    padding: 10px;}#page {    width: 960px;    margin: 0 auto;    padding-bottom: 60px;/*等于footer的高度*/}#footer {    position: absolute;    bottom: 0;    width: 100%;    height: 60px;/*脚部的高度*/    background: #6cf;    clear:both;}

原理：

<html>和<body>标签：html和body标签中必须将高度(height)设置为“100%”,这样我们就可以在容器上设置百分比高度，同时需要将html,body的margin和padding都移除，也就是html,body的margin和padding都为0；
div#container容器：div#container容器必须设置一个最小高度(min-height)为100％；这主要使他在内容很少（或没有内容）情况下，能保持100％的高度。另外我们还需要在div#container容器中设置一个"position:relative"以便于里面的元素进行绝对定位后不会跑了div#container容器；
div#page容器：div#page这个容器有一个很关键的设置，需要在这个容器上设置一个padding-bottom值，而且这个值要等于（或略大于）页脚div#footer的高度（height）值；
div#footer容器：div#footer容器必须设置一个固定高度。div#footer还需要进行绝对定位，并且设置bottom:0；让div#footer固定在容器div#container的底部，这样就可以实现我们前面所说的效果，当内容只有一点时，div#footer固定在屏幕的底部（因为div#container设置了一个min-height:100%），当内容高度超过屏幕的高度，div#footer也固定在div#container底部，也就是固定在页面的底部。你也可以给div#footer加设一个"width:100%"，让他在整个页面上得到延伸；
其他div：至于其他容器可以根据自己需求进行设置，比如说前面的div#header,div#left,div#content,div#right等。