如何将左侧导航的背景颜色扩展为与主要内容区域相同的高度？

如何将左侧导航的背景颜色扩展为与主要内容区域相同的高度？如果使用滑动窗口，背景也需要增加。请参阅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

如何将左侧导航的背景颜色扩展为与主要内容区域相同的高度？

回答

相关问题