0

このフィドルで表されるWebページを作成しようとしています...

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

タブの下の左側のナビゲーションの垂直線を、ページの下部にあるフッターの上部に描画する必要があります。

フッター機能は残す必要があります。つまり、ページ コンテンツがページ全体を占めない場合、フッターは下部に残ります。ページのコンテンツがビューポートの高さを超えると、フッターが押し下げられます。

誰でもこれを解決できますか？これは確かに挑戦的です。

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">
                    content
                </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: #f8f8f8;
}

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

.content {
    padding-top: 10px;
}

.nav {
    margin-bottom: 0px;
}
4

2 に答える 2

1

わかりました。

列を絶対位置にしてから、残りを調整するだけです。
これを機能させるために追加する必要があるコードは次のとおりです。

.navigation {

    position:absolute;
    bottom:50px;
    top:65px;
        }
.content {
    margin-left:160px;
}

これが更新されたフィドルです（見やすくするために赤いフッターを作成しました）これが 歓声
に役立つことを願っています

于 2013-04-10T22:10:23.983 に答える
0

あなたが何を望んでいるのか理解できたら、偽のコラムを作る必要があります。

http://line25.com/articles/create-sidebars-of-equal-height-with-faux-columns

:)これがあなたの質問に答えてくれることを願っています

于 2013-04-10T22:02:07.553 に答える