Question

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

Answer 1

您可以使用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);
    });
}

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

1 个答案: