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

Question

如何将左侧导航的背景颜色扩展为与主要内容区域相同的高度？如果使用滑动切换，背景也需要增加。请参阅 JSfiddle 以获取标记示例：http: //jsfiddle.net/8WJRQ/

我希望#nav 的样式扩展与 .main-content 相同的高度（不更改 HTML 结构，b/ci 使用 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>

Answer 1

您可以使用table,table-cell和table-rowcss 属性。

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);
    });
}