Html 从选项卡底部到页脚顶部的垂直条布局

这把小提琴

显示了我试图实现的布局。我希望垂直条从选项卡底部延伸到页脚。我想我已经修复了这个问题，但是当页面内容超过垂直高度时，垂直条不会调整

有没有办法改变这把小提琴，使竖条始终延伸到页脚

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">
                    <table>
                        <tr>
                            <td>some information</td>
                        </tr>
                        <tr>
                            <td>some information</td>
                        </tr>
                        <tr>
                            <td>some information</td>
                        </tr>
                        <tr>
                            <td>some information</td>
                        </tr>
                        <tr>
                            <td>some information</td>
                        </tr>
                        <tr>
                            <td>some information</td>
                        </tr>
                        <tr>
                            <td>some information</td>
                        </tr>
                        <tr>
                            <td>some information</td>
                        </tr>
                        <tr>
                            <td>some information</td>
                        </tr>
                        <tr>
                            <td>some information</td>
                        </tr>
                        <tr>
                            <td>some information</td>
                        </tr>
                        <tr>
                            <td>some information</td>
                        </tr>
                        <tr>
                            <td>some information</td>
                        </tr>
                        <tr>
                            <td>some information</td>
                        </tr>
                        <tr>
                            <td>some information</td>
                        </tr>
                        <tr>
                            <td>some information</td>
                        </tr>
                        <tr>
                            <td>some information</td>
                        </tr>
                        <tr>
                            <td>some information</td>
                        </tr>
                        <tr>
                            <td>some information</td>
                        </tr>
                        <tr>
                            <td>some information</td>
                        </tr>
                        <tr>
                            <td>some information</td>
                        </tr>
                        <tr>
                            <td>some information</td>
                        </tr>
                        <tr>
                            <td>some information</td>
                        </tr>
                        <tr>
                            <td>some information</td>
                        </tr>
                        <tr>
                            <td>some information</td>
                        </tr>
                        <tr>
                            <td>some information</td>
                        </tr>
                        <tr>
                            <td>some information</td>
                        </tr>
                        <tr>
                            <td>some information</td>
                        </tr>
                        <tr>
                            <td>some information</td>
                        </tr>
                        <tr>
                            <td>some information</td>
                        </tr>
                    </table>
                </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的最小数量是将

position:relative

添加到

选项卡窗格

，然后调整

导航

的顶部和底部值。这就是后者的绝对定位要产生任何效果所需要的

---

请参见此处：

是，当内容超出页面时，此选项适用。但是，如果删除内容使视口不滚动，则竖条不会一直延伸到页脚。看看这个例子。。。。有没有办法做到这一点，使垂直条始终下降到页脚？

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