Bootstrap 刷新到页脚不能正常工作
Bootstrap flush to footer doesnt work correctly
我正在尝试将页脚刷新到页面底部。我已经尝试了 http://getbootstrap.com/2.3.2/examples/sticky-footer.html 中列出的官方 bootstrap 方法，它似乎只适用于具有一定内容量的页面。在内容较少的页面上，它实际上将页脚推过页面底部并创建滚动条。
如果 post 做得不好，我们深表歉意。我以前从未 post 来过这里，我花了一段时间才弄明白。
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> </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> </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;
}
我知道在所有情况下下推页脚的最简单方法如下：
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin-bottom: -100px;
padding-bottom: 100px;
}
footer {
height: 100px;
}
我正在尝试将页脚刷新到页面底部。我已经尝试了 http://getbootstrap.com/2.3.2/examples/sticky-footer.html 中列出的官方 bootstrap 方法，它似乎只适用于具有一定内容量的页面。在内容较少的页面上，它实际上将页脚推过页面底部并创建滚动条。
如果 post 做得不好，我们深表歉意。我以前从未 post 来过这里，我花了一段时间才弄明白。
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> </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> </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;
}
我知道在所有情况下下推页脚的最简单方法如下：
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin-bottom: -100px;
padding-bottom: 100px;
}
footer {
height: 100px;
}