Google一下可以找到很多让页脚紧贴页面底部的方法，我试过其中的很多，但他们总会在某些方面存在一些问题。之所以有这些问题，可能是因为出现了更新版本的浏览器。一些方法因为太过久远，原本在老版本浏览器可以正常工作，却不再适用更新之后的版本。也因为这些页面太过久远，过去曾被大量链接过，所以在Google的结果中排名很高。这样，一些网站管理员在搜索sticky footer方案的时候，对搜索出的结果都很挠头，因为排在搜索结果前列的方法都有这样那样的问题。
众所周知的是Ryan Fait的方案，它的确工作的很好。但是，它必须要单独写一个没有内容的div，来提供额外的"push"。对HTML语义要求严格的人可以说代码这么写是不符合规范的，我们的方案不用附加的div。
将要介绍的Sticky Footer方案是建立在Exploring Footers article from A List Apart成果的基础上，并受到Cameron Adams和this piece at lwis.net工作的启发。在Google Chrome和其他浏览器中，当你缩放窗口的时候，页脚会浮上来。该方案会应用一种Clear fix hack方法，把页脚固定在适当的位置上，这种方法同时也解决了页面布局是两列或三列悬浮可能会带来的问题。在超过50种以上的浏览器测试中，它都能很好的工作。
HTML 代码
下面是HTML代码的基本结构，footer
标签在wrap
标签的外面。
页面内容可以放在main
标签的内部。例如，下面是两列悬浮页面布局的HTML代码；
Header放在wrap的里面，main的上面，如下所示；
如果你需要在wrap或者footer的外面放一些元素，他们必须使用绝对位置；否则，页面上计算好的100%的高度会被弄乱掉。
CSS 代码
下面的CSS代码使页脚紧贴在页面的底部。
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
你会发现，页脚的高度在这里被重复使用了三次，这是至关重要的，而且三个高度必须使用同样的值。wrap
的height属性把自己拉伸至窗口全部高度的尺寸，负的margin会把footer提高到main
的padding的位置上去，因为main已经在wrap的里面，所以main的padding已经是wrap 100%高度的一部分。 这样，footer就留在页面的底部了。
现在还不算完成，我们还需要去clearfix main
。
Clearfix Hack to the Rescue
多数SS designers对Clearfix Hack很熟悉，它解决了很多元素悬浮的问题，在这里，我们用它使得Google Chrome里面的页脚紧贴页面底部。它同时也解决了两列悬浮布局所带来的问题。这样你就可以把内容放在一列，sidebar放在另一列，不会出现个别浏览器下面main
里面的悬浮的内容导致页脚浮上来的情况。
下面的代码也加入到我们的 stylesheet 里面去；
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
如果你比较喜欢Ryan Fait的方法，添加额外的push
，在多列悬浮的页面中，同样需要用到clearfix。
需要了解的内容
高度和边距
Header，wrap 或者main
标签内部，如果对一些元素使用top或者bottom margin，可能会出现footer被向下移动的现象，移动距离一般是所用的margin的高度。这种情况下，可以使用padding替代margin 来填充元素间隙。在页面内容少的情况下，footer本来应该在页面的底部，窗口的滚动条告诉你footer在页面底部偏下的位置。找到那个捣乱的 margin，并用padding替换掉。
为main
声明padding的时候要多加小心，如果你添加了这样的代码：padding:0 10px 0 10px，你就覆盖了那个至关重要的本来应该和footer一样的padding。Google Chrome中，在页面内容很多的情况下，footer就会和你的页面内容重叠在一起。
字体的大小
设置字体大小的时候，如果你使用相对尺寸，要注意有些访问者可能会在显示器配置中使用较大字体。如果footer下面没有剩余足够的空间来容纳大字体，页面高度的设置就会被破坏，从而导致footer下面有多余的空隙。所以，请使用绝对大小(px)，不要使用pt或者em。
分享到：
Global site tag (gtag.js) - Google Analytics
相关推荐
这就是所谓的“紧贴底部的页脚”或“CSS绝对底部”布局。这种布局方式可以提供良好的用户体验，特别是在内容不足一屏时，避免页脚过早出现在页面中间。接下来，我们将深入探讨如何使用CSS来实现这一效果，并结合...
"让页脚紧贴页面底部"的问题涉及到CSS布局和浏览器兼容性，尤其是在新的浏览器版本和不同设备尺寸下。传统的解决方案往往在某些情况下无法达到预期效果，这通常是因为旧的CSS技巧无法适应现代浏览器的更新。 一种...
页面底部固定是网页设计中一个常见需求，确保页脚始终位于浏览器窗口的底部，而不是随着页面内容的多少上下浮动。在Web前端开发中，CSS提供了多种方法来实现页面底部固定。接下来，我们将详细探讨这些方法。 方法一...
Bootstrap 粘页脚效果是网页设计中常见的一种布局技巧，它的主要目的是让页脚始终保持在页面底部，即使页面内容较少时也不会上移。在Bootstrap框架中实现这种效果，可以通过CSS样式和HTML结构来完成。以下是对这个...
4. `.footer`：设置`position:absolute`和`bottom:0`，使页脚紧贴容器底部。同时，设置`width:100%`确保页脚宽度充满整个容器，`height`定义了页脚的具体高度。 这种方法适用于大部分情况，但请注意，如果`.page`...
在网页设计中，有时我们需要将文字放置在div容器的底部，以便实现特定的布局效果，如页脚信息、版权声明等。CSS（层叠样式表）作为一种强大的样式控制语言，虽然没有直接提供“文字底部对齐”的参数，但可以通过其他...
这种布局方式特别适用于响应式设计，尤其是手机网页，它能确保页面内容较少时，页脚紧贴屏幕底部，而内容超出一屏时，页脚则跟随在内容之后。 ### CSS Sticky Footer布局的原理 Sticky Footer布局的核心在于利用...
为了使footer始终在页面底部，我们需要利用CSS来调整元素的定位和高度属性。 1. **父元素布局**： - 父元素（在这里是`#wapper`）的`position`属性应设置为`relative`，这样其子元素（如`#footer`）可以相对于它...
导航条原本正常显示,可能不一定在顶部位置.但当然滚动鼠标时,导航条或广告图片会自动紧贴顶部,当鼠标重新滚动到顶部时,则导航又恢复正常...共三个html文件,一个是顶部浮动,两个在底部浮动,包含一个手机版的页脚导航条
在添加页脚时，可以使用`clear`属性避免页脚紧贴在上方的栏之后。不过，浮动布局的一个问题是它仍然遵循常规文档流，这意味着元素的顺序会影响到布局结果。有时，为了达到理想的布局效果，可能需要调整HTML源代码中...
如果需要一个底部固定位置的元素（如页脚），可以使用`clear:both`来确保其位于所有浮动元素下方，保持页面结构的完整性。 然而，浮动布局方式的缺点是可能导致父元素高度塌陷，即父元素不会自动扩展以包裹浮动的子...
在页面底部固定的问题，可以通过设置`.foot`的`position`属性为`fixed`并将其`bottom`属性设置为`0`，这样无论内容如何变化，页脚都会固定在浏览器窗口的底部。需要注意的是，使用`fixed`定位后，`.foot`将不再随...