獲取邊欄列以擴展到頁面底部

我正在研究擴展到頁面底部的兩列布局。但是，我的側邊欄在container-fluid高度處切斷，即使我試圖讓它延伸到整個頁面。獲取邊欄列以擴展到頁面底部

奇怪的是，我的內容列工作正常。

HTML：

<div class="container-fluid"> 
    <div class="row-fluid columns no-margin fill"> 
     <div id="sidebar" class="span2 columns no-margin right-edge"></div> 
     <div id="contentWrapper" class="span10 columns no-margin pull-right"></div> 
    </div> 
</div>

CSS：

html, body, form { 
    height: 100%; 
    min-height: 100%; 
    background-image:url("../../images/lightGreyBackground.png"); 
    background-repeat: repeat; 
    font-family:"Segoe UI", Helvetica, Arial, Sans-Serif; 
} 
.container-fluid { 
    margin: 0 auto; 
    height: auto; 
    padding: 0px; 
} 
.columns { 
    height: 100%; 
    min-height:100%; 
    margin: 0px; 
    width: 100%; 
} 
.fill { 
    position: absolute; 
    height: 100%; 
    min-height: 100%; 
} 
.no-margin { 
    margin-left: 0%; 
    width: 100%; 
} 
.right-edge { 
    border-right: 1px; 
    border-right-style: solid; 
    border-right-color: #CCCCCC; 
} 
#sidebar { 
    background-color: White; 
    padding-top:15px; 
}

來源

2013-08-21 Lance Collins

[的jsfiddle（http://www.jsfiddle.net）它爲我們請。 – Itay

對於初學者，這些列如何？他們都設置爲100％的寬度。你有沒有被使用的類。你能發佈更多嗎？ – dudledok

我認爲你的代碼中還有其他東西會導致你的問題。我把它設置成小提琴，它工作得很好。 http://jsfiddle.net/g83Pm/ –

對於有2列：

<html> 
    <head> 
     <style type="text/css"> 
      .container-fluid { width: 100%;} 
      .float { 
       float: left; 
       width: 50%; /* Size colonne */ 
       margin: 1em 0; /* Margin colonne */ 
      } 
      .spacer { clear: both; } 
     </style> 
    </head> 
    <body> 
     <div class="container-fluid"> 
      <div class="float">Colonne 1</div> 
      <div class="float">Colonne 2</div> 
      <div class="spacer"></div> 
     </div> 
    </body> 
</html>

使用框架bootstrap或960.gs ，強大的前端框架，可以更快更輕鬆地開發Web。

自舉3：

<div class="container"> 
    <!-- Example row of columns --> 
    <div class="row"> 
    <div class="col-lg-4"> 
     <h2>Heading</h2> 
     <p>Donec id elit non mi porta gravida at eget metus.</p> 
     <p><a class="btn btn-default" href="#">View details »</a></p> 
    </div> 
    <div class="col-lg-4"> 
     <h2>Heading</h2> 
     <p>Donec id elit non mi porta gravida at eget metus.</p> 
     <p><a class="btn btn-default" href="#">View details »</a></p> 
    </div> 
    <div class="col-lg-4"> 
     <h2>Heading</h2> 
     <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in.</p> 
     <p><a class="btn btn-default" href="#">View details »</a></p> 
    </div> 
    </div> 
</div>

來源

2013-08-21 15:19:54 ctesniere

我不得不說，Bootstrap 3的網格系統是__ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ – Bojangles

獲取邊欄列以擴展到頁面底部

回答

相關問題