3

私はこれを機能させようとして立ち往生しています。メイン列のコンテンツがページの高さを埋めるときは正しく見えますが、そうでないときはそうではありません。

右に見えます: http://jsfiddle.net/creativetags/ngv4H/1/

正しく見えない: http://jsfiddle.net/creativetags/EAuBc/1/

<div class='container'>
    <div class='container-wrap'>
        <nav class='tabnav'>Some nav menu items here</nav>
        <div class='container-inner'>
            <div class='clearfix' id='mainwrap'>
                <div class='columns' id='main'>
                     <h2>Main content scrolls here</h2>
                </div>
            </div>
            <div class='columns' id='side'>
                <div class="sidecontent">
                    <p>Fixed Side panel</p>
                </div>
            </div>
        </div>
    </div>
</div>

固定された偽のサイドバー列を使用しているため、メイン列をスクロールしても表示されたままになります。

.container-innerコンテンツが下部に達していない場合でも、ページの下部まで埋めるには背景が必要です。

.tabnavbody タグから背景画像を表示する必要があるため.container-inner、ページの上部から開始することはできません。

4

1 に答える 1

3

同じ CSS を使用して、大きなコンテンツと小さなコンテンツのデモを更新しました。

変更の概要

メインコンテンツの修正

  • .container-wrapと の両方に白い背景色を適用し.container-innerます。
  • .containerとを に設定.container-wrapしheight:100%;ます。
  • 下の背景画像が.tabnav白い背景色で覆われているため、背景画像を に再適用します.tabnav。これがソリューションの重要な部分です。

サイドバーの更新

  • #sideとを に設定.sidecontentしheight:100%;ます。
  • サイド背景画像を から.containerに移動し.sidecontentます。

CSSが追加されました

.container {
    height: 100%;
    ...
}
.container-wrap {
    width: 660px;
    height: 100%;
    background-color: #f8f8f8;
}
.tabnav {
    background: #1d1d1b url("http://cat.storehousebelfast.com/assets/bg.jpg") repeat fixed top left;
}
#side {
    height: 100%;
    ...
}
.sidecontent {
    background: transparent url("http://cat.storehousebelfast.com/assets/right-column.gif") repeat-y top right;
    height: 100%;
    ...
}

CSS を削除しました

.container {
    background: transparent url("http://cat.storehousebelfast.com/assets/right-column.gif") repeat-y top right;   /* Remove this */
    ...
}
.container-inner {
    min-height: 100%;   /* Remove this */
    height: 100%;       /* Remove this */
    ...
}
于 2013-03-16T22:59:08.343 に答える