前端开发:页脚固定顶部的方法
前端开发:页脚固定顶部的方法
issac宝华 发表于1年前
前端开发:页脚固定顶部的方法
  • 发表于 1年前
  • 阅读 32
  • 收藏 1
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: 关键点: 1 min-height: 100%; 2 padding-bottom;3 box-sizing; 4 position: relative; position: absolute;

1 将html、body的高度设为100%,这样是为了使用body的子元素height:100%;生效(在我的另一篇博文有详细说明):

html,body{
   height: 100%;
   margin: 0;
   padding: 0;
}

2 基本布局:

<body>
<!--容器-->
<div class="container">
    <!--内容-->
    <div>
        <!--你的内容-->
    </div>
    <!--页脚-->
    <div class="footer">
        footer
    </div>
</div>
<body>

3 对容器进行css处理:

.container{
    min-height: 100%;
    /*border: 1px solid red;*/
    text-align: center;
    padding-bottom: 60px;
    box-sizing: border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    position: relative;
}

4 对页脚进行css处理:

.footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    background: lavender;
    text-align: center;
}

Tip: 页脚要对“容器”进行绝对定位,而不是body。

5 完整代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS + DIV 让页脚始终底部</title>
    <meta name="generator" content="" />
    <!--在移动端按比例缩放-->
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <style>
        html,body{
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .container{
            min-height: 100%;
            /*border: 1px solid red;*/
            text-align: center;
            padding-bottom: 60px;
            box-sizing: border-box;
            -moz-box-sizing:border-box; /* Firefox */
            -webkit-box-sizing:border-box; /* Safari */
            position: relative;
        }
        .footer{
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 60px;
            background: lavender;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <div>
        content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>
        content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>
        content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>
        content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>
        content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>
        content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content-bottom
    </div>
    <div class="footer">
        footer
    </div>
</div>
<body>
</html>

当然,让页脚固定底部有很多方法,还想了解更多的方法,可以参考下面的博文:

http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page

标签: 页脚固定底部
共有 人打赏支持
粉丝 10
博文 121
码字总数 34397
×
issac宝华
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: