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

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

2021-11-30 91

版权

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

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

Bootstrap 粘页脚（你必须得学会的简单技能），说得具体一点就是“将固定高度的页脚紧贴页面底部”。说完这句话，王二我有点诚惶诚恐，其实这句话出自bootstrap入门介绍，不过呢，请原谅我的粗鲁（灵感非原创），毕竟项目的实际情况和模板有所区别，所以参照模板，也不能确保快速的完成“粘页脚”的效果，那么还是听我来唠叨一下吧！

一、页面效果

页面非常简单，注意亮线为火狐边缘，可以很清楚的看到，页脚灰色部分沉浸在页面底部。

二、实例讲解（无navbar-fixed-top）

①、代码

<!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>
<link type="text/css" rel="stylesheet" href="/ymeng/components/bootstrap/css/bootstrap.css" />
<style type="text/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;
}
    </style>
<title>发布项目</title>
</head>
<body>
    <div id="wrap">
        <nav class="navbar navbar-default navbar-fixed">
        </nav>
        <div class=" container project_choose">
            <div class="row">
                <div class="col-md-5 project_general">
                    <span class="f14">我有一个梦想，有创意项目，有创意产品，点击发布回报</span>
                    <div class="blank20"></div>
                    <div>
                        <a type="button" class="btn btn-danger" href="/ymeng/deal/initDealCaluseConfirm">立即发布产品</a>
                    </div>
                </div>
                <div class="col-md-2"></div>
                <div class="col-md-5 project_agency">
                    <span class="f14">我有创业梦想，有融资需求，点击发布股权</span>
                    <div class="blank20"></div>
                    <div>
                        <button type="button" class="btn btn-primary">立即发股权</button>
                    </div>
                </div>
            </div>
        </div>
        <div id="push"></div>
    </div>
<div class="footer ">
    <div class="container">
        <div class="row footer-top">
            <div class="col-sm-6 col-lg-6">
                <h4></h4>
                <p>欢迎你加入，这里有你想要的.</p>
            </div>
            <div class="col-sm-6  col-lg-5 col-lg-offset-1">
                <div class="row about">
                    <div class="col-xs-3">
                        <h4>关于</h4>
                        <ul class="list-unstyled">
                            <li>
                                <a href="">关于我们</a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-xs-3">
                        <h4>联系方式</h4>
                        <ul class="list-unstyled">
                            <li>
                                <a target="_blank" title="云梦网官方微博" href="">新浪微博</a>
                            </li>
                            <li>
                                <a href="">电子邮件</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <div class="row footer-bottom">
            <ul class="list-inline text-center">
                <li>Copyright &copy;2016. n 洛阳限公司 Software All Rights Reserved.</li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

②、页面body布局

<body>
    <div id="wrap">
        <nav class="navbar navbar-default navbar-fixed">
        </nav>
        <div class=" container">
        </div>
        <div id="push"></div>
    </div>
    <div class="footer ">
    </div>
</body>