13

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

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

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

4

3 に答える 3

24

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

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

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

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

  4. 最後に、私の提案は、小さなjqueryを使用することです。ここでは高速セットアップ、ここでは完全なサイトです。今すぐ書いてください：

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

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

お役に立てれば

于 2012-10-02T19:47:41.630 に答える
2

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

短いコンテンツページがページの下部まで伸びておらず、サイドバーも短くなっていることに気付いたため、コードに1行追加しました。ここで、スクリプトは、どちら（.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エリアの高さがボディよりも低い場合は、スクリプトは必要ありません。

于 2012-10-25T06:02:45.947 に答える
-1

height:100%正常に動作するはずですが、含まれているdivも100％にする必要があります。

#main-content {
    background: url("../images/diagonal-noise.png");
}
#content {
    background-color: #FEFEFE;
    width: 920px;
    margin-left: auto;
    margin-right: auto;
    border-left: 25px solid #79879E;
    border-right: 25px solid #79879E;
    padding: 20px;
    height:100%;
}
#secondary-content {
    background-color: #CED6E2;
    width: 200px;
    float: left;
    border-right: 1px dotted #79879E;
    padding: 10px;
    margin: 10px 20px 10px -20px;
    height:100%;
}
于 2012-10-02T19:05:49.910 に答える