使用absolute和relative设置页脚的不同？

更新于
2015-06-11

css.footer {
  height: 70px;
  width: 100%;
  background-color: #f7f7f7;
  border-top: 1px solid #dbdada;
  position: absolute;
  bottom: 0;
  left: 0;
}

如果设置div.footer设置为absolute的会固定死一屏的底部，
如果设置div.footershe设置relative的话，页面内容很少不到一屏，页脚就不在
页面的底部了，如何二者兼得？

前端 html css

阅读 3.6k

4 个回答

daizhan

✓ 已被采纳

直接上代码吧。

<!DOCTYPE HTML>
<html>
    <head>
        <title>footer 自适应</title>
        <meta charset="utf-8" />
        <style>
            html{
                height: 100%;
            }
            body{
                margin: 0;
                padding: 0;
                position: relative;
                min-height: 100%;
            }
            div {
                text-align: center;
                font-size: 14px;
            }
            .header{
                height: 80px;
                color: #fff;
                background-color: #f95b82;
            }
            .body{
                border: 1px solid #000;
                height: 500px;
                padding-bottom: 80px;
            }
            .footer{
                color: #fff;
                width: 100%;
                position: absolute;
                top: 0;
                bottom: 0;
            }
            .footer div{
                position: absolute;
                bottom: 0;
                height: 80px;
                width: 100%;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="header"> header </div>
        <div class="body"> body </div>
        <div class="footer">
            <div>
                <p>footerer</p>
            </div>
        </div>
    </body>
</html>

之前也有这样的需求，可是后面还是没做。一个成熟的产品一般不会没有内容的。
也可以用js试试，就不会有那么乱七八糟的css了。

solar

2.9k2511

发布于
2015-06-11

更新于
2015-06-11

结构：(伪代码)

slimbody
    .content-container
    .footer

样式：

scsshtml, body {
    height: 100%;
}

.content-container {
    min-height: 100%;
    margin-bottom: -70px;
    padding-bottom: 70px;
    box-sizing: border-box;
}

.footer {
    height: 70px;
}

注：以上只写了必要的代码，你可以按需添加别的代码