0

背景画像と本体の別の背景画像を含む左の列があり、画面の残りの部分を埋めます。左側の列の右側にコンテンツ領域があり、ブラウザー ウィンドウを越えて垂直に伸びます。左の列を 100% の高さに設定すると、左の列の背景画像を下にスクロールすると、画面の元のサイズを超えて拡張されません。左の列をブラウザウィンドウの元の高さを超えて拡張し、コンテンツ領域に合わせる純粋な css の方法はありますか?

http://ophilium.com/test/test.html

html {
    height: 100%;
}
body {
    height: 100%;
    background-image: url(../images/rightPanel.png);
    background-repeat: repeat;
    height: 100%;
}

#left {
    background-repeat: repeat-y;
    width: 207px;
    padding: 10px;
    float: left;
    height: 100%;
    background-image: url(../images/leftPanel.png);
}
#right {
    height: 500px;
    padding: 10px;
    min-width: 773px;
    float: left;
}
#container {
    position: relative;
    min-width: 1100px;
    height: 100%;
    background-repeat: repeat;
}
4

4 に答える 4

0

あなたの質問を正しく理解できたら、そのequal height columnsテクニックを使う必要があります。解決策をグーグルで検索すると、私はこことここに連れてこられました。そこでは、サイドバーをメイン コンテンツ領域と同じにするさまざまな方法が見つかるかもしれません。最高のものを選ぶだけです:)

于 2012-04-28T20:49:03.433 に答える
0

デモをチェックしてくださいhttp://jsfiddle.net/n9Tcv/

var right_height = jQuery('#right').height();
var left_height = jQuery('#left').height();
jQuery('#left').height(right_height);​

jQueryの使い方を知っていますか？疑問がある場合は、私に返信してください。このコードをこの状況のように実行します

于 2012-04-28T20:44:33.773 に答える
0

html タグと body タグの高さを 100% に設定すると、両方とも高さがブラウザー ウィンドウの内側の高さに設定されます。つまり、両方とも同じ値であり、固定値でもあります。また、div、#container および #left は body 要素の子であり、body 要素に関連しているため、それに応じて 100% の高さ、つまり内部の高さを設定します。

さらに、質問に対する答えが必要な場合: では、div #right が拡張されるのはなぜですか? 拡張されずにオーバーフローするためです。また、本体、#container、または #right にオーバーフロー プロパティを非表示に設定するように指示しないため、そのような種類のブラウザーの動作を妨げるものはありません。この場合、元のウィンドウの高さは、オーバーフローが引き起こす高さであると想定します。

于 2012-04-28T21:01:06.033 に答える
0

要素にルールを追加background-attachment: fixed;しますbody。

于 2012-04-28T20:20:45.660 に答える