引導3：頂部和底部

我學的引導和嘗試這樣 enter image description here

灰色部分的代碼佈局瀏覽器窗口。

行0必須粘在頂部（如導航欄）
行2必須粘在底部（如頁腳）
行1是動態的高度依賴於瀏覽器窗口的高度。

如何通過CSS呈現這些？

<div class="container"> 
     <div class="row clearfix"> 
      <div class="col-md-12 column"> 
      </div> 
     </div> 
     <div class="row clearfix"> 
      <div class="col-md-5 column"> 
      </div> 
      <div class="col-md-2 column"> 
      </div> 
      <div class="col-md-5 column"> 
      </div> 
     </div> 
     <div class="row clearfix"> 
      <div class="col-md-12 column"> 
      </div> 
     </div> 
    </div>

來源

2014-01-11 user2520217

嘗試使用此代碼：

<html> 
    <head> 
    <link data-require="[email protected]" data-semver="3.1.1" rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /> 
    <script data-require="[email protected]*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
    <script data-require="[email protected]*" data-semver="3.1.1" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 

    <style> 
     p{text-align: center;} 
     html, body{height:100%;} 
     #content{ 
     min-height:100%; 
     height:auto !important; 
     height:100%; 
     /* Negative indent header and footer by its height */ 
     margin:-80px auto -60px; 
     /* Pad bottom by header and footer height */ 
     padding:80px 0 60px; 
     } 
     /* Set the fixed height of the header here */ 
     #header{height:80px;} 
     /* Set the fixed height of the footer here */ 
     #footer{height:60px;} 
    </style> 
    </head> 

    <body> 
    <div id="header"> 
     <div class="container"> 
     <div class="row"> 
      <div class="col-xs-12"><p>header</p></div> 
     </div> 
     </div> 
    </div> 

    <div id="content"> 
     <div class="container"> 
     <div class="row"> 
      <div class="col-xs-5"><p>left column</p></div> 
      <div class="col-xs-2"><p>center column</p></div> 
      <div class="col-xs-5"><p>right column</p></div> 
     </div> 
     </div> 
    </div> 
    <div id="footer"> 
     <div class="container"> 
     <div class="row"> 
      <div class="col-xs-12"><p>footer</p></div> 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

來源

2014-01-11 16:41:31 mcmac

這似乎並沒有工作：http://plnkr.co/edit/QTvkqEZy08o74mOcIzRI?p=preview – Kyle

謝謝！像一個魅力工作 –

這是一個很好的答案，這是非常有益的。 – Rav

引導3：頂部和底部

回答

相關問題