html - 强制垂直条始终接触页脚的布局

Question

这个 fiddle ...

http://jsfiddle.net/jeljeljel/5BSva/17/

显示我正在尝试实现的布局。我希望选项卡底部的垂直条延伸到页脚。

这是我需要完成的...

1. 在初始状态下，没有显示任何内容，垂直条正确地向下延伸到页脚。垂直条应始终延伸到页脚。

2. 当您切换要显示的内容时，请注意竖线没有延伸到页脚。垂直条需要延伸到页脚。

3. 我想在不使用任何图像黑客的情况下完成此任务。

有没有办法改变这个 fiddle ，使垂直条总是延伸到页脚，无论是否有内容拉伸(stretch)父级？

HTML

<div class="wrapper">
    <div class="header">HEADER</div>
    <div class="body">
        <ul class="nav nav-tabs" id="tabcontrol">
            <li class="active"><a href="#home" data-toggle="tab">Home</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="home" style="">
                <div class="navigation" style="">navigation
                    <br />navigation
                    <br />navigation
                    <br />
                </div>
                <div class="content">
                    <button id="toggle">Toggle Content</button>
                    <div id="theContent" style="display:none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue odio quis libero dapibus ut tincidunt lectus vestibulum. Donec quis ligula tortor. Sed adipiscing tempor elit, at porttitor lacus luctus ut. Suspendisse suscipit, orci bibendum tincidunt venenatis, lorem ligula aliquet felis, in fringilla diam velit eu sapien. Aliquam vitae varius lacus. Nullam cursus nibh at leo varius vestibulum. Maecenas cursus dui quis metus hendrerit a lacinia est eleifend. Donec pharetra pharetra libero, non tincidunt magna fringilla in. Nulla convallis ornare dui, sed vestibulum turpis rutrum vestibulum. Duis convallis, eros nec vulputate congue, velit elit scelerisque purus, ut ultricies eros felis ac justo.</div>
                </div>
            </div>
        </div>
    </div>
    <div class="push"></div>
</div>
<div class="footer center">
    <div style="border-bottom: 2px solid rgb(174, 174, 201); background-color: #fff;"></div>
    <div>FOOTER</div>
</div>

CSS

.body {
    border: 1px solid rgb(174, 174, 201);
    border-top: 5px solid rgb(174, 174, 201);
    border-bottom: 5px solid rgb(174, 174, 201);
    border-left: 2px solid rgb(174, 174, 201);
    border-right: 2px solid rgb(174, 174, 201);
    padding-bottom: 1000px;
    margin-bottom: -1000px;
}
/* Sticky Footer by Ryan Fait (http://ryanfait.com/) */
* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -50px auto;
    /* the bottom margin is the negative value of the footer's height */
    overflow: hidden;
}
.footer {
    height: 50px;
    background-color: red;
}
.footer, .push {
    height: 50px;
    /* .push must be the same height as .footer */
    clear: both;
}
form {
    height: 100%;
}
/* Sticky Footer by Ryan Fait (http://ryanfait.com/) */
.navigation {
    float: left;
    width: 150px;
    border-right: 3px solid rgb(174, 174, 201);
    padding-top: 10px;
    white-space: nowrap;
    position:absolute;
    bottom:50px;
    top:65px;
}
.content {
    padding-top: 10px;
    margin-left:160px;
}
.nav {
    margin-bottom: 0px;
}

JavaScript'

<script>
$(document).ready(function(){
    $('#toggle').click(function () {
        $('#theContent').toggle();
    });
});
</script>

Answer 1

JS 是一种选择吗？我一直这样做:

为您的导航和内容 div 添加一个 ID

$('#toggle').click(function () {
    $('#theContent').toggle(0,function(){
        $('#navigation').height($('#content').height());
    });
});

它需要一些技巧才能为您工作，例如在隐藏文本时找到最小高度并获取窗口调整大小事件并进行相应调整，但它应该适合您。