在网页设计中，保持footer始终固定在页面底部是常见的需求，尤其在内容不足填满整个屏幕时，确保footer不会上浮。本实例将通过CSS实现这一功能，主要涉及的CSS属性包括`margin`, `height`, `min-height`, `position`, 和负值外边距等。
我们来看HTML的基本结构。代码中的HTML包含一个`header`、一个`wrapper`和一个`footer`。`header`用于展示网站头部信息，`wrapper`包裹着主要内容（`content`），而`footer`则用于显示版权或其他底部信息。`<div class="clear"></div>`用于清除浮动，防止内容溢出影响footer的位置。
接下来是CSS样式部分。使用通配符`*`将所有元素的默认边距设置为0，以避免浏览器的默认样式影响布局。然后，将`html`和`body`的`height`设置为100%，确保它们可以充满整个视口。同时，设置`width`为85%并使用`margin: 0 auto;`居中对齐网页内容。
`header`设置了固定的`height`和背景颜色，这只是一个示例，实际可以根据需求自定义。`wrapper`是关键，它使用了`min-height: 100%;`确保即使内容较少，整个容器也能至少占据整个视口高度。`height: auto!important;`和`height: 100%;`是为了处理IE6的兼容性问题，`min-height`在某些旧版本的IE浏览器中不被支持。`margin: 0 auto -4em;`的负值外边距 `-4em` 是为了抵消`footer`的高度，这样即使内容不足，`footer`也会停留在页面底部。
`footer`的样式没有特别之处，主要是用来展示版权信息，这里只是一个简单的例子。在实际应用中，可能需要添加更多的元素和样式。
这个实例的核心在于`wrapper`的负值外边距和`min-height`属性的结合，它们共同确保了无论内容多少，`footer`始终固定在页面底部。这种布局方法称为“粘性footer”或“绝对底部布局”，适用于许多现代网页设计。需要注意的是，这种方法在响应式设计中可能需要进一步调整，以适应不同设备的屏幕尺寸。在移动设备上，可能需要改变footer的行为，比如让它在内容滚动到底部时出现，或者保持在屏幕底部但允许内容滚动覆盖。
- 1
- 2
前往页