ブートストラップ3 100％高さDIV（Navbarとスティッキーフッタ付き）

Question

固定ナビゲーションバーとスティッキーフッタを使用したレイアウトがあります。本体には、左側に列が整列した流体容器があります。私はその列を本体（ナビゲーションバーとフッタの間）に垂直に塗りつぶしてもらいたいですが、動作させることはできません。私は見つけることができるすべての例を試したが、役に立たなかった。

私はこれまでの内容を示すためにJSFiddleを作成しました。

これは私が達成するために望んでいるものです：

マイHTML：あなたは上height:calc(100vh - 110px);を使用することができます

/* 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%; 
} 

Answer 1

：

<!-- 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 .main-content div。 110pxはフッターの高さ+ヘッダーの高さで、ビューポートの高さから差し引かれます。

http://www.bootply.com/v8XITHB4fP