div高度100％的頁眉和頁腳 - 沒有技巧

Question

我想創建一個佈局，我有一個固定的高度在px中的頁眉（nav），一個固定的px頁腳以及它們之間的div佔據剩餘的空間。

破碎演示：http://jsfiddle.net/murid/0vcyqm3y/

我試圖做到的，是爲藍格走一路下跌到頁腳。請記住，我正在使用「推」div來讓頁腳位於頁面的底部，以防頁面內容很短，並且所述內容可能會很長，因此會推下頁腳。

我已經簽出了類似的問題在Stackoverflow，但答案涉及位置絕對，JavaScript或背景顏色的身體，我試圖避免所有這些，並有一個簡單的CSS與內容的背景顏色的解決方案DIV。

我使用的是Bootstrap btw。

CSS和HTML：

html, 
 
    body { 
 
     height: 100%; 
 
    } 
 
    
 
    #wrap { 
 
    \t min-height: 100%; 
 
    \t height: auto !important; 
 
    \t height: 100%; 
 
    \t margin-bottom: -50px; 
 
    } 
 
    
 
    nav.navbar { 
 
    \t margin-bottom: 0; 
 
    } 
 
    
 
    section { 
 
    \t padding: 10px 0; 
 
    \t margin-left: -15px; 
 
    \t margin-right: -15px; 
 
    } 
 
    
 
    .section-primary { 
 
    \t background: #337ab7; 
 
    } 
 
    
 
    section > .row { 
 
    \t margin-left: 0; 
 
    \t margin-right: 0; 
 
    } 
 
    
 
    footer, 
 
    .push { 
 
    \t height: 50px; 
 
    }

<div id="wrap"> 
 
    
 
    \t <nav class="navbar navbar-inverse navbar-static-top" role="navigation"> 
 
    \t \t <div class="container-fluid"> 
 
    \t \t \t <div class="navbar-header"> 
 
    \t \t \t \t <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
 
    \t \t \t \t \t <span class="sr-only">Toggle navigation</span> 
 
    \t \t \t \t \t <span class="icon-bar"></span> 
 
    \t \t \t \t \t <span class="icon-bar"></span> 
 
    \t \t \t \t \t <span class="icon-bar"></span> 
 
    \t \t \t \t </button> 
 
    \t \t \t \t <a class="navbar-brand" href="">Logo</a> 
 
    \t \t \t </div> 
 
    \t \t \t <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
    \t \t \t \t <ul class="nav navbar-nav navbar-right"> 
 
    \t \t \t \t \t <li> 
 
    \t \t \t \t \t \t <a href="">Logout</a> 
 
    \t \t \t \t \t </li> 
 
    \t \t \t \t </ul> 
 
    \t \t \t </div> 
 
    \t \t </div> 
 
    \t </nav> 
 
    
 
    \t <div class="container-fluid"> 
 
    \t \t <section class="section-md section-primary"> 
 
    \t \t \t <div class="row"> 
 
    \t \t \t \t <div class="col-sm-12"> 
 
    \t \t \t \t \t <div class="row"> 
 
    \t \t \t \t \t \t <div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3"> 
 
    \t \t \t \t \t \t \t <div class="panel panel-default"> 
 
    \t \t \t \t \t \t \t \t <div class="panel-body"> 
 
    \t \t \t \t \t \t \t \t \t Panel Body 
 
    \t \t \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t </div> 
 
    \t \t \t \t </div> 
 
    \t \t \t </div> 
 
    \t \t </section> 
 
    \t </div> 
 
    
 
    \t <div class="push"></div> 
 
    
 
    </div> 
 
    
 
    <footer> 
 
    \t <nav class="navbar navbar-inverse navbar-static-top" role="navigation"> 
 
    \t \t <div class="container-fluid"> 
 
    \t \t \t <div class="navbar-header"> 
 
    \t \t \t \t <a class="navbar-brand" href="">Copyright</a> 
 
    \t \t \t </div> 
 
    \t \t \t <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
    \t \t \t \t <ul class="nav navbar-nav navbar-right"> 
 
    \t \t \t \t \t <li> 
 
    \t \t \t \t \t \t <a href="">Logout</a> 
 
    \t \t \t \t \t </li> 
 
    \t \t \t \t </ul> 
 
    \t \t \t </div> 
 
    \t \t </div> 
 
    \t </nav> 
 
    </footer>

Answer 1

我不得不說我不是這個迷..但是這是唯一的解決辦法CSS我知道..

http://codepen.io/pacMakaveli/pen/EjWXNw?editors=110

否則，爲了更乾淨的方式，請使用flexbox。

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
#wrap { 
 
\t height: 100%; 
 
    display: table; 
 
    width: 100%; 
 
    border: 2px solid green; 
 
} 
 

 
#wrap > nav, 
 
footer { 
 
    display: table-row; 
 
} 
 

 
nav.navbar { 
 
\t margin-bottom: 0; 
 
} 
 

 
section { 
 
\t padding: 10px 0; 
 
\t margin-left: -15px; 
 
\t margin-right: -15px; 
 
} 
 

 
.section-primary { 
 
\t background: #337ab7; 
 
} 
 

 
.content { 
 
    border: 3px solid red; 
 
    display: table-cell; 
 
    height: 100%; 
 
} 
 

 
section > .row { 
 
\t margin-left: 0; 
 
\t margin-right: 0; 
 
}

<div id="wrap"> 
 

 
    <nav class="navbar navbar-inverse navbar-static-top" role="navigation"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
 
      <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="">Logo</a> 
 
     </div> 
 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li> 
 
      <a href="">Logout</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </nav> 
 

 
    <div class="content"> 
 
    <div class="container-fluid"> 
 
     <section class="section-md section-primary"> 
 
     <div class="row"> 
 
      <div class="col-sm-12"> 
 
      <div class="row"> 
 
       <div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3"> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-body"> 
 
        Panel Body 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </section> 
 
    </div> 
 
    </div> 
 

 
    <footer> 
 
    <nav class="navbar navbar-inverse navbar-static-top" role="navigation"> 
 
     <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
      <a class="navbar-brand" href="">Copyright</a> 
 
     </div> 
 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
      <li> 
 
       <a href="">Logout</a> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </nav> 
 
    </footer> 
 
</div>