CSS实现页脚固定在底部的布局技巧

"页脚显示在页面底端的布局方法" 在网页设计中，确保页脚始终固定在页面底部是一个常见的需求，无论页面内容的多少，页脚都应该保持在视口的最下方。这里提供的是一种使用CSS实现的页脚布局方法，主要涉及到`position`、`height`和`padding-bottom`等属性的巧妙应用。 首先，我们需要理解这个布局的基本思路：通过设置HTML和BODY元素的高度为100%，使得整个页面有一个全屏的容器。然后，我们创建一个相对定位的`.body`类，其最小高度（`min-height`）也被设置为100%，这样即使内容不足，也能保证 `.body` 的高度至少与屏幕相同。 在`.body`内部，`.main`类用于包含页面主要内容，它的宽度设为100%，并使用`padding-bottom`值来模拟一个与页脚相同高度的空间。这样，当内容不足时，`.main` 会因`padding-bottom`撑开，确保页脚始终位于页面底部。如果内容超过这个高度，页脚则会被推至页面底部，但仍然固定在视口底端。 接下来，页脚`.foot`使用绝对定位（`position: absolute`），并将底部（`bottom: 0px`）和宽度（`width: 100%`）设置为0，确保它贴合页面的底部边缘。页脚的高度（`height: 200px`）在这里是固定的，可以根据实际需求调整。 代码中还使用了`_height:100%`，这是一个针对IE6的私有hack，因为在IE6中不支持`min-height`属性，所以用下划线开头的`_height`来模拟`min-height`的效果。 总结来说，这个布局方法的关键在于利用了CSS的相对定位和绝对定位，以及`min-height`和`padding-bottom`的组合，确保了页脚始终在页面或视口的底端。这种方法适用于那些需要页脚固定在底部且内容长度可变的网页设计中。需要注意的是，这种方法可能在某些特定的浏览器或设备上表现不一致，因此在实际应用时还需要进行跨浏览器测试和兼容性调整。