开发者社区> 问答> 正文

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

.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的话,页面内容很少不到一屏,页脚就不在
页面的底部了,如何二者兼得?

展开
收起
杨冬芳 2016-06-01 18:38:06 1849 0
1 条回答
写回答
取消 提交回答
  • IT从业

    直接上代码吧。

    <!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了。

    2019-07-17 19:23:40
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载