web-dev-qa-db-ja.com

ページの全長にわたってサイドバーを拡張するにはどうすればよいですか？

私は他の解決策を見てきましたが、それらは私のために働いていません。私は高さを試しました：サイドバーで100％ですが、それでもうまくいきません。誰かが私を正しい方向に向けてくれませんか？サイドバーの色をページ全体に広げたいのですが。

HTML： http://lrroberts0122.github.com/DWS/lab3/index.html

CSS： http://lrroberts0122.github.com/DWS/lab3/css/main.css

cssextendsidebar
12
Lindsay

ここでもう少し説明しようと思います。

  1. height：100％;をcssで設定する場合、-「100％何？」と自問する必要があります。 -...これは、要素の位置をどのように設定するかによって異なります。 position：absolute;を設定すると、ユーザーのブラウザビューの100％になります。 要素の親の高さの100％になります。したがって、適切な高さまたは絶対位置をどこかに設定していない場合は、何もない（デフォルトのコンテンツ調整された高さにロールバックする）100％を取得します。

  2. それでは、少しの間、親divの位置を絶対にして100％の高さに設定することを検討しましょう（高さが設定されている場合、比較的配置された子サイドバーが同じ高さになるようにします100％まで）。 HERE A FIDDLE -今、私たちが持っているものを見てみましょう：ユーザーのブラウザビューと同じ高さの親div（yellow）がありますが、その高さは固定されており、コンテンツに合わせて変更されません。親の高さに一致するサイドバー（赤）があり（したがって、その高さはコンテンツイーザーに適合しません）、最後に、親divの高さと明らかに重なり、どこにも着地しない長いコンテンツテキスト（透明なbg）があります。良くない...

  3. 私たちは何ができる？ （ そうではない親のオーバーフローをスクロールに設定するは良い考えです ）...問題を正しい方法で監視する必要があります：基本的に2つの兄弟divがあり、あなたは彼らに彼らのコンテンツの高さにうまくフィットさせたいが、同時にあなたは彼らの一人がその兄弟の同じ高さを保つことを望んでいる->そのための簡単な簡単なcssソリューションはない（私が知っている）。

  4. 最後に、私の提案は、小さなjqueryを使用することです： ここでは高速セットアップ および ここではフルサイト 。今すぐ書く：

    var height = $('.content').height()
$('.sidebar').height(height)​

    そしてそれはうまくいくでしょう 。親の絶対位置を残して100％の高さに設定しましたが、コンテンツパネルの実際のサイズとほぼ一致するサイドバーの高さを設定しなかったことに注意してください。

お役に立てれば

21
Onheiron

@Onheiron、あなたの投稿は非常に役に立ちました。ありがとうございました！

短いコンテンツページがページの下部まで伸びておらず、サイドバーも短くなっていることに気付いたので、コードに行を追加しました。これで、スクリプトはどちら（.contentまたはbody）の高さが高いかを確認し、同じ高さを.sidebarに適用します。

[〜＃〜] html [〜＃〜]：

<body>
    <div class="sidebar"></div>
    <div class="content"></div>
</body>

JavaScript：

$(document).ready(function () {
    var height1 = $('.content').height()
    var height2 = $('body').height()

    if (height1 > height2) {
        $('.sidebar').height(height1)
    } else {
        $('.sidebar').height(height2)
    }
});

[〜＃〜] css [〜＃〜]：

body, .sidebar {
    height:100%
}

次に、デフォルトでcssになるため、ifステートメントのelse部分が失われます。 .content領域の高さが本体よりも低い場合は、スクリプトは必要ありません。

2
Ryan Labelle