如何將左側導航的背景顏色擴展爲與主要內容區域相同的高度？

如何將左側導航的背景顏色擴展爲與主要內容區域相同的高度？如果使用滑動窗口，背景也需要增加。請參閱JSfiddle的標記示例：http://jsfiddle.net/8WJRQ/如何將左側導航的背景顏色擴展爲與主要內容區域相同的高度？

我希望#nav的樣式可以擴展與.main-content相同的高度（無需對HTML結構進行任何更改，b/c我將使用12列模板。）

*我應該提到編號的類（.two和.ten）不能更改，因爲它們是全局模板的一部分。

<div class="row"> 
    <div class="two columns"> 
     <div id="nav"> 
      <ul><li>Home</li><li>News</li><li>About </li></ul> 
     </div> 
    </div> 
    <div class="ten columns"> 
     <div class="main-content"> 
      <p>Lorem ipsum</p> 
      <p>Lorem ipsum</p> 
      <p>Lorem ipsum</p> 
      <a href="#" onclick="$('.foo').slideToggle()">Toggle Text</a> 
      <p class="foo">Lorem ipsum<br> 
      hello<br> 
      world</p> 
      <p>Lorem ipsum</p> 
     </div> 
    </div> 
</div>

來源

2013-04-25 C3P-Bro

可以在內容包裝在一個容器中，或者是自動生成的 – 2013-04-25 03:04:23

@Cody Guldner的HTML：是的，任何標記是的。十一個孩子或。二是可以改變的。 – 2013-04-25 03:23:45

@CodyGuldner：你能否詳細說明這是可能的？ – 2013-04-25 03:29:36

可以使用table，table-cell和table-row CSS屬性。

http://www.w3schools.com/cssref/pr_class_display.asp

，並把背景爲.two .columns

http://jsfiddle.net/G6sdD/

更新

確定這裏是一個js版本。我沒有真正考慮到它。所以可能有更好的方法來做到這一點。

http://jsfiddle.net/vGNXb/

$(document).ready(function(){ 
var height = $('.ten.columns').height(); 
$('.two.columns').height(height); 
}); 
function extend(){ 
    $('.foo').slideToggle(function(){ 
     var height = $('.ten.columns').height(); 
     $('.two.columns').height(height); 
    }); 
}

來源

2013-04-25 02:30:21 btevfik

這很好，但我知道IE7不支持table-cell。有沒有辦法在#nav ID上完成此操作。我應該提到編號類（.two和.ten）的CSS不應該真正改變，因爲它是全局12列模板的一部分。你認爲這隻能通過JS實現嗎？ – 2013-04-25 02:52:46

@C3P-兄弟可能你可以用JS來做。但恕我直言，這是一個更好的解決方案。 IE7很不合時宜。它的使用率只有1％。我不會擔心IE7。 – btevfik 2013-04-25 02:56:30

@C3P-Bro確定我添加了一個js版本。 – btevfik 2013-04-25 03:09:27

如何將左側導航的背景顏色擴展爲與主要內容區域相同的高度？

回答

相關問題