- ·上一篇：竞选班委的ppt如何做wps
- ·下一篇：电脑版的ppt如何复制
如何把ppt的页脚放在底部
2025-12-20 14:27:55
1.如何将页脚固定在页面底部
作为一个Web的前端攻城师，在制作页面效果时肯定有碰到下面这种现象：当一个HTML页面中含有较少的内容时，Web页面的“footer”部分随着飘上来，处在页面的半腰中间，给视觉效果带来极大的影响，让你的页面看上去很不好看，特别是现在宽屏越来越多，这种现象更是常见。
那么如何将Web页面的“footer”部分永远固定在页面的底部呢？ 注意了这里所说的是页脚footer永远固定在页面的底部，而不是永远固定在显示器屏幕的底部，换句话说，就是当内容只有一点点时，Web页面显示在浏览器底部，当内容高度超过浏览器高度时，Web页面的footer部分在页面的底部，总而言之Web页面的footer部分永远在页面的底部，换句说，Footer部分永远沉底。如下图所示： 方法一： 首先我们来看第一种方法，这种方法是来自于Matthew James Taylor的《How to keep footers at the bottom of the page》。
下面我们就一起来看看Matthew James Taylor介绍的方法。 HTML Markup Header Section 页面容容部分 Footer Section 其实我们可以在div#page增加所需的内容结构，如下所示： Header Section Left Sidebar Main content Right sidebar Footer Section 真正来说，实现这页脚永远固定在页面的底部，我们只需要四个div，其中div#container是一个容器，在这个容器之中，我们包含了div#header（头部），div#page（页面主体部分，我们可以在这个div中增加更多的div结构，如上面的代码所示），div#footer（页脚部分） CSS Code 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； } /*=======主体内容部分=======*/ #left { width: 220px; float: left; margin-right: 20px; background: lime; } #content { background: orange; float: left; width: 480px; margin-right: 20px; } #right{ background: green; float: right; width: 220px； } 下面我们一起来看看这种方法的实现原理： 1. 和<body>标签：html和body标签中必须将高度（height）设置为“100%”，这样我们就可以在容器上设置百分比高度，同时需要将html,body的margin和padding都移除，也就是html,body的margin和padding都为0; 2. div#container容器：div#container容器必须设置一个最小高度（min-height）为100%；这主要使他在内容很少（或没有内容）情况下，能保持100%的高度，不过在IE6是不支持min-height的，所以为了兼容IE6，我们需要对min-height做一定的兼容处理，具体可以看前面的代码，或者阅读Min-Height Fast Hack了解如何解决min-height在Ie6下的bug问题。
另外我们还需要在div#container容器中设置一个”position:relative”以便于里面的元素进行绝对定位后不会跑了div#container容器； 3. div#page容器：div#page这个容器有一个很关键的设置，需要在这个容器上设置一个padding-bottom值，而且这个值要等于（或略大于）页脚div#footer的高度（height）值，当然你在div#page中可以使用border-bottom人水-width来替代padding-bottom，但有一点需要注意，此处你千万不能使用margin-bottom来代替padding-bottom，不然会无法实现效果； 4. div#footer容器：div#footer容器必须设置一个固定高度，单位可以是px（或em）。div#footer还需要进行绝对定位，并且设置bottom:0；让div#footer固定在容器div#container的底部，这样就可以实现我们前面所说的效果，当内容只有一点时，div#footer固定在屏幕的底部（因为div#container设置了一个min-height:100%），当内容高度超过屏幕的高度，div#footer也固定在div#container底部，也就是固定在页面的底部。
你也可以给div#footer加设一个”width:100%”，让他在整个页面上得到延伸； 5. 其他div：至于其他容器可以根据自己需求进行设置，比如说前面的div#header,div#left,div#content,div#right等。 优点： 结构简单清晰，无需js和任何hack能实现各浏览器下的兼容，并且也适应iphone。
缺点： 不足之处就是需要给div#footer容器设置一个固定高度，这个高度可以根据你的需求进行设置，其单位可以是px也可以是em，而且还需要将div#page容器的padding-bottom（或border-bottom-width）设置大小等于（或略大于）div#footer的高度，才能正常运行。 上面就是Matthew James Taylor介绍的如何实现页脚永远固定在页面的底部，如果大家感兴趣可以阅读原文，也可以直接点击这里查看Demo。
方法二： 这种方法是利。