Bootstrap 粘页脚,你必须得学会的简单技能

简介: 版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/50987126 Bootstrap 粘页脚(你必须得学会的简单技能),说得具体一点就是“将固定高度的页脚紧贴页面底部”。
版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/50987126

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>
  • body中第一级元素,两个div,分别为wrap和footer
  • 第二级元素中,一个nav,两个div,分别为container和push(如果你忘记了push这个div,ok,你的页面在缩放时会错乱的)
    这里写图片描述

以上列出的元素自然粘页脚必不可少的。

③、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的粘页脚效果!

  1. warp
  2. 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;
}

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

  • html的最小高度为100%,而不再是wrap 。
  • html的位置为relative(相对),而footer的位置为absolute(绝对),非常关键。
  • body的margin-bottom为footer的高度200px。

ok,之前做了第一种,目前换为第二种,更加简洁,推荐。


感谢您阅读【沉默王二的博客】,如果王二的博客给您带来一丝帮助或感动,我(也就是王二)将不甚荣幸。
如果您碰巧喜欢,可以留言或者 加qq群120926808,这将是我鼓捣更多优秀文章的最强动力。

相关文章
|
前端开发
Bootstrap 3将页脚冲洗到底部不固定
Bootstrap 3将页脚冲洗到底部不固定
|
前端开发 容器
Bootstrap 粘页脚,你必须得学会的简单技能(1)
Bootstrap 粘页脚,你必须得学会的简单技能
108 0
Bootstrap 粘页脚,你必须得学会的简单技能(1)
|
前端开发 容器
Bootstrap 粘页脚,你必须得学会的简单技能(2)
Bootstrap 粘页脚,你必须得学会的简单技能
160 0
N..
|
6月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
65 0
|
前端开发 容器
|
前端开发 容器
|
前端开发 开发者 容器
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
|
前端开发
|
前端开发 JavaScript 容器