Bonfire で Twitter ブートストラップを使用しています。コンテンツが少ない場合は一番下のページにフッターを配置しようとしていますが、コンテンツが多い場合はフッターが最後に表示されます。
私は何時間も試みてきましたが、何が欠けているのかを見つけることができません。利用可能な例とコードを確認しましたが、何が違うのか、何が欠けているのかを見つけることができませんでした。
ここで見逃していることを誰かが指摘できれば、本当に感謝しています。
<!doctype html><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" type="text/css" href="http://localhost/bonfire/public/themes/jumbotron/css/bootstrap.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localhost/bonfire/public/assets/css/bootstrap-responsive.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localhost/bonfire/public/themes/jumbotron/css/footer_style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localhost/bonfire/public/themes/jumbotron/css/jumbotron.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localhost/bonfire/public/themes/default/screen.css" media="screen" />
<link rel="shortcut icon" href="http://localhost/bonfire/public/favicon.ico">
</head>
<body>
<div class="wrapper">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brokerage Free - PAN Services </a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-left">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Apply for PAN <b class="caret"></b></a>
<ul class="dropdown-menu">
<li ><a href="#">New PAN Application</a></li>
<li class="divider"></li>
<li><a href="#">Replacement PAN Application</a></li>
<li class="divider"></li>
<li><a href="#">Correction PAN Application</a></li>
</ul>
</li>
<li ><a href="#">FAQ</a></li>
<li><a href="#about">Track Application Status</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div>
<div class = "container">
<h1> Privacy Policy </h1>
We are a financial Services Company, offering a wide variety of Financial Services.
</div><div class="push"></div>
<footer>
<div class="container">
<div class="span12">
<div clas="row">
<div class="span2 offset1"><a href="/bonfire/public/pan/about_us">About US</a></div>
<div class="span2 "><a href="/bonfire/public/pan/privacy">Privacy Policy</a></div>
<div class="span2 "><a href="#">Terms of Use</a></div>
<div class="span2 "><a href="#">Contact Us</a></div>
</div>
<div class="push"></div>
</div>
<div class="row">
<p align="center">© Brokerage Free 2014. - All rights reserved.
</div>
</div>
</footer>
</div>
footer_style.css は以下のとおりです。
<style>
html, body {
height: 100%;
}
footer {
color: #666;
background: #222;
padding: 17px 0 18px 0;
border-top: 1px solid #000;
height: 150px;
position: relative;
}
footer a {
color: #999;
}
footer a:hover {
color: #efefef;
text-decoration: none;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -250px;
}
.push {
height: 63px;
}
/* not required for sticky footer; just pushes hero down a bit */
.wrapper > .container {
padding-top: 60px;
padding-bottom: 60px;
}
#main {
overflow:auto;
padding-bottom:250px; /* this needs to be bigger than footer height*/
}
.container .credit {
margin: 20px 0;
}
</style>