Bootstrap flush to footer无法正常工作

时间:2015-01-06 14:43:36

标签: css twitter-bootstrap twitter-bootstrap-2

我正在尝试将页脚刷新到页面底部。我已经尝试了http://getbootstrap.com/2.3.2/examples/sticky-footer.html上列出的官方引导方法,它似乎只适用于具有一定内容量的页面。在内容较少的页面上,它实际上会将页脚推到页面底部并创建滚动条。

对不起,如果帖子做得不好。我以前从来没有在这里发布过,我花了一段时间来弄清楚它。

Picture 1 shows the main body并且没有可见的页脚,因为它已超过页面底部。

<link rel="stylesheet" href="css/bootstrap.css" >
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/camera.css">
<link rel="stylesheet" href="fonts/font-awesome.css">
<link rel="stylesheet" href="css/easy-responsive-tabs.css">
<!--JS-->
<script src="js/jquery.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/superfish.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.mobilemenu.js"></script>
<script src="js/jquery.ui.totop.js"></script>
<script src="js/jquery.equalheights.js"></script>
<script src="js/camera.js"></script>


<script>
    $(document).ready(function(){
        jQuery('.camera_wrap').camera();
    });
</script>
<!--[if (gt IE 9)|!(IE)]><!-->
      <script src="js/jquery.mobile.customized.min.js"></script>
<!--<![endif]-->
<!--[if lt IE 9]>
    <div style='text-align:center'><a href="http://windows.microsoft.com/en-US/internet-    explorer/products/ie/home?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." /></a></div>  
  <![endif]-->
  <!--[if lt IE 9]><script src="../docs-assets/js/ie8-responsive-file-warning.js"></script><!    [endif]-->

  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  <![endif]-->
</head>

<body>
<div id="wrap">  
<!--header-->
<header>
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-4">
            <h1 class="navbar-brand navbar-brand_"><a href="index.html"><span>Smile Hawthorn</span></a></h1>
        </div>
        <div class="col-lg-8 col-md-8 col-sm-8 follow-box">
          <div class="box2">
            <ul>
                    <li><a href="#" target="new"><button type="button" class="btn btn-book btn-lg">
<span class="fa fa-calendar-header">BOOK ONLINE</button></a></li>

            </ul>
              <p class="tel"><span class="fa fa-phone-header"></span></p>

            </div>
            <div class="box1">
                <p>Please click  <strong>Book Online</strong> or <strong>Call</strong> our clinic for an appointment. </p>
            </div>
        </div>
    </div>
    <div class="menu-box">
        <nav class="navbar navbar-default navbar-static-top tm_navbar clearfix" role="navigation">
            <ul class="nav sf-menu clearfix">

              <li><a href="home.html">Home</a></li>

                <li  class="active sub-menu"><a href="aboutus.html">About Us</a><span></span>
                    <ul class="submenu">
                        <li><a href="staff.html">Our Staff</a></li>
                        <li><a href="values.html">Our Values</a></li>
                        <li><a href="technology.html">Our Technology</a></li>
                    </ul>
                </li>

                  <li class="sub-menu"><a href="index-2.html">Services</a><span></span>
                    <ul class="submenu">
                        <li><a href="#">Emergency</a></li>
                        <li><a href="#">Fillings<span></span></a>
                            <ul class="submenu">
                                <li><a href="#">Composite</a></li>
                                <li><a href="#">CEREC</a></li>
                                <li><a href="#">Amalgam</a></li>
                            </ul> 
                        </li>
                        <li><a href="#">Crowns/Caps</a></li>
                        <li><a href="#">Root Canal</a></li>
                        <li><a href="#">Whitening</a></li>
                        <li><a href="#">Wisdom Tooth Removal</a></li>
                        <li><a href="#">Veneers/Bonding</a></li>
                        <li><a href="#">Orthodontics</a></li>
                                                </ul>
                </li>

                <li><a href="index-2.html">F.A.Q</a></li>
                <li><a href="index-3.html">Pricing</a></li>
                <li><a href="index-4.html">Location</a></li>
            </ul>
        </nav>
    </div>
    </div>
</header>

<!-- Content -->
<div class="global indent">


    <div class="container">
    <div class="row clearfix">
            <div class="col-lg-3 col-md-3 col-sm-2 banner-box2">
            <div>
                    <p class="title" align="center"><span>About Us</span></p><p>&nbsp;</p>
                    <p class="description" align="center"><a href="staff.html">Our Staff</a></p>
                  <p class="description" align="center"><a href="values.html">Our Values</a></p>
                  <p class="description" align="center"><a href="technology.html">Our Technology</a></p>

            </div>
            </div>

        <div class="col-lg-9 col-md-9 col-sm-10 banner-box2">
            <div>
                <p class="title">Lorem ipsum dolor sit amet <br>
                  conse ctetur adipisicing elit, sed <br>
                  do eiusmod tempor incididunt ut <br>
                labore et dolore magn</p>
                <p>&nbsp;</p>

            </div>
        </div>
        </div> 
     </div>       


</div>
</div>

<!--</div> <!-- end wrap-->
<div id="push"></div>-->


<div id="footer"><!--footer-->
<div class="container">
    <div class="row clearfix">
       <div class="col-lg-4 col-md-4 col-sm-4"><!-- First Row First Coloumn -->
                <p class="text" align="left"><span class="fa fa-home-footer"></span><span class="footer_txt"> testing 123</span></p>
       </div>

        <div class="col-lg-4 col-md-4 col-sm-4"><!-- First Row First Coloumn -->
               <p class="text" align="center"><span class="fa fa-phone-footer"></span><span class="footer_txt"> testing 123</span></p>

      </div>

        <div class="col-lg-4 col-md-4 col-sm-4"><!-- First Row First Coloumn -->
              <div class="col-xs-10 col-sm-8 col-md-8 col-lg-10"> <!-- nested 2 coloumn in First Row -->
        <p class="text" align="right"> <span class="fa fa-envelope-footer"></span><span class="footer_txt"><a href="index-5.html"><span style="color: #000;">  Email Us</span></a></span></p>

      </div>

    </div>
    <hr>
    <div class="row clearfix"> 
        <div class="col-md-12 column"> <!-- second row -->
        </div>
    </div>

    </div>
</div>


</div><!-- end footer Div -->


<script src="js/bootstrap.min.js"></script>
<script src="js/tm-scripts.js"></script>

</body>

</html>

我使用了以下CSS

body {
    line-height: 1.42857;
    font-family: 'Roboto', "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    height: 100%;
    background-color: #ffffff;
    font-weight: bold;
}
html{
    height: 100%;
}

/* Wrapper for page content to push down footer */
      #wrap {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        /* Negative indent footer by it's height */
        margin: 0 auto -100px;
      }
#push{ /* height must be the same as #footer height */
     height: 100px;
}

#footer {
    background-color: #FFFFFF;
    padding-top: 40px;
    padding-right: 0;
    padding-left: 0;
    background-position: top;
    left: 0px;
    bottom: 0px;
    height: 100px;
    background-image: url(../img/footer.jpg);
    background-repeat: repeat;
}

1 个答案:

答案 0 :(得分:0)

我知道在所有情况下按下页脚的最简单方法如下:

html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    margin-bottom: -100px;
    padding-bottom: 100px;
}
footer {
    height: 100px;
}

Demo here