1
我有一個使用固定導航欄和粘腳的佈局。在主體中，我有一個流體容器，其中有一列與左邊對齊。我希望該列垂直填充主體（在導航欄和頁腳之間），但是我無法使其正常工作。我嘗試了所有可以找到的例子，但都無濟於事。Bootstrap 3 100％具有導航欄和粘腳的DIV高度DIV
我已經建立了這個JSFiddle來顯示我到目前爲止。
這就是我希望能實現：
我的HTML：
<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 ">
<div class="main-content">
<h1>Hello world.</h1>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
Sticky footer based on <a href="http://getbootstrap.com/examples/sticky-footer-navbar/">Boostrap example</a>.
</div>
</footer>
我的CSS：
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #999999;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
body > .container-fluid {
padding-top: 50px;
}
.container-fluid .col-sm-6 {
padding: 0;
}
.navbar {
margin-bottom: 0;
}
.footer {
padding: 15px 0;
}
.main-content {
background: #efefef;
padding: 20px;
height: 100%;
min-height: 100%;
}