2

質問

コンテンツ領域のCSS背景テクスチャを、可変高さのヘッダーの直後から開始したいと思います。テクスチャの自然な高さは900ピクセルで、フラットカラーに段階的に変化するため、コンテンツの開始と本文の終了の間の使用可能なスペースに収まる場合は、テクスチャ全体を表示する必要があります。テクスチャがコンテンツ領域を人為的に拡大したり、不要なスクロールを引き起こしたりしないようにする必要がありますが、コンテンツがページに収まるよりも長い場合でもスクロールは表示されます。

JSFiddle

リクエストに応じて、これが私の問題のJSFiddleです。質問には実際にはDOM要素が1つしかないため、フィドルはあまり明確になっていないと思います。http://jsfiddle.net/AbEUe/5/

動作しないもの

#contentAndBackground {
    padding-bottom: 900px;
    margin-bottom: -900px;
    background: url('my900pxHighImage.png') repeat-x;
}

上記は画像全体が表示されることを保証しますが、負のマージンは私が望んでいたように不要なスクロールバーを遠ざけることはありません。

#contentAndBackground {
    min-height: 900px;
    background: url('my900pxHighImage.png') repeat-x;
}

同じ問題。画像全体が表示されますが、スクロールバーは常に表示されます。

画面のサイズ変更を処理する必要のあるJavaScriptの使用は避けたいです。

4

2 に答える 2

1

私はそれをしたと思います：http：//jsfiddle.net/AbEUe/7/

2つのコンテナdivを作成しましたが、どちらも高さが100％です。

  • 最初のものにはヘッダーと背景が含まれているoverflow:hiddenため、背景は下部で停止します。

  • 2つ目はヘッダーとコンテンツを含み、配置を使用するため、これは最初のコンテナーの上にあり、100％を超えて拡張できます（テキストの量に必要な場合）。

ヘッダーを2回レンダリングする必要があることがわかりますが、最初のヘッダーは表示されないため、問題にはなりません。

編集：

背景をコンテンツdivに設定することで、最後の問題（コメントを参照）を解決しました。http://jsfiddle.net/AbEUe/8/を参照してください

于 2012-06-13T12:30:58.383 に答える
1

あなたの質問はあまり明確ではありませんが、これはあなたの子猫が切り刻まれるのを防ぎます。

#content {background: url('http://placekitten.com/g/200/300') repeat-x; min-height:300px;}
于 2012-06-13T10:29:47.737 に答える