1

このフィドル...

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

私が達成しようとしているレイアウトを示しています。タブのベースからの垂直バーをフッターまで延長したい。

ここに私が達成する必要があるものがあります...

  1. 初期状態ではコンテンツは表示されておらず、縦棒は正しくフッターまで伸びています。垂直バーは常にフッターまで延長する必要があります。

  2. 表示するコンテンツを切り替えると、垂直バーがフッターまで伸びていないことに注意してください。垂直バーはフッターまで延長する必要があります。

  3. 画像ハックを使用せずにこれを達成したいと考えています。

親を引き伸ばすコンテンツがあるかどうかに関係なく、垂直バーが常にフッターまで伸びるように、このフィドルを変更する方法はありますか?

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

ジャバスクリプト'

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

1 に答える 1

1

JSはオプションですか？私はいつもこれを行います：

ナビゲーションとコンテンツ div に ID を追加する

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

テキストが非表示のときに最小の高さを見つけ、ウィンドウのサイズ変更イベントを取得してそれに応じて調整するなど、少し工夫が必要ですが、うまくいくはずです。

于 2013-04-15T16:54:37.530 に答える