html的footer置于页面最底部的简单实现方法

有时候，面对简短的内容页面，浏览器的高度可能无法充分展现，但我们仍希望页脚（footer）能够固定在窗口的最底部。下面是一种实现这一需求的方法，分享自长沙网络推广的实践经验。

我们需要设定HTML的结构。其中包含一个名为“wapper”的父层，内部包含“main-content”和“footer”两个子层。

HTML代码如下：

```html

```

接下来是CSS的设置。我们需要确保“wapper”父层的高度自适应，同时为其内部的“footer”设定绝对定位，使其始终位于窗口底部。

CSS代码如下：

```css

wapper {

position: relative; / 保证footer是相对于wapper位置绝对 /

height: auto; / 保证页面能撑开浏览器高度时显示正常 /

min-height: 100%; / IE6不支持，需单独配置 /

}

footer {

position: absolute;

bottom: 0; / 关键 /

left: 0; / IE下一定要记得 /

height: 60px; / footer的高度一定要是固定值 /

}

main-content {

padding-bottom: 60px; / 重要！给footer预留的空间 /

}

```

以上设定在大多数浏览器上都能正常工作。但对于老旧的IE 6浏览器，我们需要进行特别的样式处理。针对IE 6，我们可以这样设定：

```css

```

这样，即使在内容较少的情况下，页脚也能始终固定在窗口底部。以上就是长沙网络推广分享给大家的html的footer置于页面最底部的简单实现方法，希望对大家有所帮助。也希望大家能够支持狼蚁SEO，共同学习进步。