使用absolute和relative设置页脚的不同?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

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

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

分享到
取消 提交回答
全部回答(2)
  • 小旋风柴进
    2019-07-17 19:17:56

    relative:相对定位
    absolute:绝对定位
    给段代码做示例:

    <div style="position:relative;width:200px;height:120px;background:red;margin-top:100px;">
        <div style="position:absolute;right:5px;top:10px;width:100px;height:50px;background:yellow;">
              绝对定位的div
        </div>
    </div>

    这里设定的外部div为relative,那么里面的div的绝对定位就是相对外部的那个div来定位的,
    screenshot

    <div style="width:200px;height:120px;background:red;margin-top:100px;">
        <div style="position:absolute;right:5px;top:10px;width:100px;height:50px;background:yellow;">
              绝对定位的div
        </div>
    </div>

    screenshot
    如果外面的div没有设定relative,那么里面的div就是相对浏览器的边界来定位的.

    0 0
  • a123456678
    2019-07-17 19:17:56

    直接上代码吧。

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

    0 0
添加回答
云计算
使用钉钉扫一扫加入圈子
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

推荐文章