0

私は以前にこの質問をして解決策を見つけましたが、それに取り組んでいくと、解決策が最善ではないことがわかりました（提案は両方をdisplay：table-cellに設定することでした）

内にdivを追加すると、高さが変化し、レイアウトが手に負えなくなります。

私が欲しいのは本当にシンプルで、示されている画像のようなものです

[編集：これが問題が発生する主な理由です。影を含めるためにdivを追加しようとしています] ここに画像の説明を入力してください

テクスチャードBGを、ページの高さと同じ高さまで伸ばしたい（コンテンツが変化するにつれて、テクスチャードbgが続くように）

だから私は次のようなものを作りました

<body>
<div id="page">
<div id="sidecolumn">
<div id="sidebar"></div>
</div>
<div id="maincolumn">
<div id="content"></div>
</div>
</div>
</body>

すべてのdivとボディスタイルを高さ：100％に設定します。しかし、問題は、コンテンツがページ制限を超えて伸びると（スクロールバーが表示される）、テクスチャ化されたBGがオーバーフローせず、元の場所で停止することです。画面の高さが800ピクセルで、コンテンツが1000ピクセルを超えて1000ピクセルに達すると、テクスチャbgは800ピクセルで停止します。

display：table-cellを使用して推奨事項を試したところ、テクスチャbgがコンテンツとともに流れますが、サイドバーに追加すると、コンテンツdivの上に空白が表示されるため追加できません。この問題をどのように処理する必要があるかについての提案はありますか？

4

3 に答える 3

1

編集：XunYangのアプローチを使用するとうまくいくでしょう。それは、彼が自分で言ったように、型にはまらないものです;）

フィドル： http： //jsfiddle.net/Nu2wH/

html, body {
    height: 100%:
    padding: 0;
    margin: 0;  
}

#page {
    background: #444444;
    min-height: 100%; 
    height:auto !important; 
    height:100%;
    overflow: hidden !important;
    background: url("http://upload.wikimedia.org/wikipedia/commons/3/3e/Social_icons-google-22x22.png?uselang=de") repeat;
}

#sidecolumn  {
    width: 45%;
    padding-left: 5%;
    padding-top: 5%;
    padding-bottom: 5%;
    float: left;
}   

#sidebar {
    background: #ddd;
}
#maincolumn  {
    padding: 5%;
    width: 40%;
    float: right;
    background: #AA9933;
    height: 100%:
}    
#content {
    background: #ddd;
}

</ p>

于 2012-08-22T09:12:43.740 に答える
0

すべてのブラウザで、css3宣言のbackground-sizeを使用できます

background: url(images/bg.jpg) no-repeat center center fixed; //fallback for unsupported browsers and sets the background image
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
于 2012-08-22T08:46:57.423 に答える
0 
#page
{
background:url(images/bg.png);
width:200px;/*Width of your sidebar*/
}
#maincolumn
{
margin-left:200px;/*width of your sidebar*/
}

あまり一般的ではありませんが、機能します:)

于 2012-08-22T09:10:29.013 に答える