Bootstrap 粘页脚，你必须得学会的简单技能(2)-阿里云开发者社区

Bootstrap 粘页脚，你必须得学会的简单技能(2)

2021-11-30 140

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Bootstrap 粘页脚，你必须得学会的简单技能

③、css分析

html,body {
    height: 100%;
}
#wrap {
    min-height: 100%;
    height: auto !important;
    margin: 0 auto -200px;
}
 #push
   height: 200px;
 }
 .footer {
    border-top: 1px solid #e5e5e5;
    color: #777;
    padding: 19px 0;
    background-color: #f5f5f5;
}

html,body的高度必须是100%，也就是充满浏览器窗口高度

#wrap div的min-height必须是100%，height呢，就自动适应。

关键点在于margin，top的外边距为0，而bottom的外边距则为-200px。

注意，就是-200px，理论上是footer高度（你可以通过firebug调试最佳高度）的负数，这一点也很关键！为什么要为负数呢？因为warp的高度本来就是100%，为负数的话，就可以为footer留出显示完整的高度，否则footer将出现在页面滚动条下部。

#push元素，页面完整显示的时候，似乎看不出来push元素的作用，但当你页面缩放时，如果没有push，footer元素就会和container中的元素重合，之前图上也有说明，那么其具体作用如何呢？通过firebug我们选中push的div，可以看到其正好包含着footer元素内容，如此将会阻止footer和container元素重合。

如此，以上关键点就介绍完了，你只要注意以下元素的分布，就可以轻松搞定bootstrap的粘页脚效果！

warp

push

三、实例讲解（有navbar-fixed-top）

①、核心代码

<head>
<link type="text/css" rel="stylesheet" href="/ymeng/components/bootstrap/css/bootstrap.css" />
<style type="text/css">
html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 200px;
}
 .footer {
        border-top: 1px solid #e5e5e5;
    color: #777;
    padding: 19px 0;
    background-color: #f5f5f5;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 200px;
}
    </style>
<title>发布项目</title>
</head>
<body>
    <nav class="navbar navbar-default navbar-fixed-top">
    </nav>
    <div class=" container project_choose">
        <div class="row">
        </div>
    </div>
</div>
<div class="footer ">
    <div class="container">
    </div>
</div>
</body>
</html>

②、页面body布局

<body>
    <nav class="navbar navbar-default navbar-fixed-top">
    </nav>
    <div class=" container">
    </div>
    <div class="footer ">
    </div>
</body>

与第一种无navbar-fixed-top区别在于：

body中不再嵌入wrap，并列元素分别为nav（导航），container，footer

并且去掉push的div

③、css分析

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 200px;
}
 .footer {
        border-top: 1px solid #e5e5e5;
    color: #777;
    padding: 19px 0;
    background-color: #f5f5f5;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 200px;
}