如何在使用引導程序的網格時使列使用其父母高度的100％？

我想用自己的側邊欄和主要內容在引導程序中創建佈局。我現在用的是下面的HTML的時刻（也this jsFiddle）：如何在使用引導程序的網格時使列使用其父母高度的100％？

<!DOCTYPE html> 
<html> 
<head> 
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" media="screen" rel="stylesheet" type="text/css" /> 
<style type="text/css"> 
    #sidebar { 
     background-color: lightgreen; 
    } 
    #footer { 
     background-color: lightblue; 
    } 
</style> 
</head> 

<body> 
<div class="container"> 
    <div class="row"> 
     <div class="span4"> 
      <div id="sidebar"> 
       <ul> 
        <li><a href="http://www....">Home</a></li> 
        <li><a href="http://www..../faq">Questions</a></li> 
        <li><a href="http://www..../news">News</a></li> 
        <li><a href="http://www..../contact">Contact</a></li> 
       </ul> 
      </div> 

     </div> 
     <div class="span8" id="content"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
       Aenean in purus purus. 
       Ut risus lorem, pharetra nec iaculis sit amet, blandit nec turpis. 
       Aliquam dapibus orci ac sem viverra semper cursus ante varius. 
       Vestibulum iaculis eleifend magna, sit amet blandit nibh dignissim pellentesque. 
       Etiam suscipit accumsan tincidunt. 
       Sed auctor, orci at pretium commodo, enim dui fermentum nulla, id blandit enim lacus non mi. 
       Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
      </p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
       Aenean in purus purus. 
       Ut risus lorem, pharetra nec iaculis sit amet, blandit nec turpis. 
       Aliquam dapibus orci ac sem viverra semper cursus ante varius. 
       Vestibulum iaculis eleifend magna, sit amet blandit nibh dignissim pellentesque. 
       Etiam suscipit accumsan tincidunt. 
       Sed auctor, orci at pretium commodo, enim dui fermentum nulla, id blandit enim lacus non mi. 
       Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
      </p> 

     </div> 
    </div> 
    <div class="row"> 
     <div class="span12" id="footer"> 
      Footer 
     </div> 
    </div> 
</div> 
</body> 
</html>

我想是這樣的：

Desired Result

我所得到的卻是這樣的：

Actual result

我能做些什麼來讓邊欄div一路走下去？理想情況下，不改變HTML（只有CSS變化），但如果這是不可能的，我會採取任何事情。

來源

2012-12-17 David Miani

這個答案可能會幫助：http://stackoverflow.com/a/8741070/681807 –

@MyHeadHurts：可惜是t echnique似乎不能在頁腳存在的情況下工作 - 側欄會延伸到屏幕的末尾，而不是使用該代碼的頁腳。 –

您可以通過使用「填充」元素來實現此目的。

創建兩個CSS類，一個叫.filler（父），並用僞元素另一個類叫做.fill::before：

.filler{ 
    position: relative; 
} 

.fill::before{ 
    content: ""; 
    position: absolute; 
    top:0; 
    left: 0; 
    width: inherit; 
    margin: inherit; 
    bottom: 0; 
    background-color: lightgreen; 
    z-index: -1; 
}

然後，您可以filler類添加到row元素和fill類在span4元素：

<div class="container"> 
    <div class="row filler"> 
     <div class="span4 fill"> 
      <div id="sidebar"> 
       <ul> 
        <li><a href="http://www....">Home</a></li> 
        <li><a href="http://www..../faq">Questions</a></li> 
        <li><a href="http://www..../news">News</a></li> 
        <li><a href="http://www..../contact">Contact</a></li> 
       </ul> 
      </div> 
     </div> 
    .... 
</div>

來源

2012-12-17 10:35:22

謝謝，效果很好。我嘗試了一些類似的問題，但是一定會弄亂它。 –

但是：之前僞不會在IE7中播放:( –

@GeorgeKatsanos我認爲這不是問題，IE7在全球各個地區的市場份額不到1％，顯然取決於您您支持哪些瀏覽器，但是您必須在某個時刻繪製線條。您是否仍然構建IE6準備好的網站？ –

如何在使用引導程序的網格時使列使用其父母高度的100％？

回答

相關問題