これは何度も尋ねられていることは知っていますが、与えられた解決策はどれもうまくいきませんでした. 大まかな基本的な例はここで見ることができ、便利な視覚的なガイドはここで見ることができます。
したがって、問題を引き起こしているのは左側の茶色の div です。それは完全に空で、純粋に装飾的で、背景以外には何もありません。（ピンクのものは問題ありません。私が言ったことを正確に実行します。）明らかに、茶色の div の場合、height:100% を作成します。ブラウザ ウィンドウの下部までしか伸びません。ピンクの div のコンテンツによってページがスクロールされる場合、茶色の div はそれ以上下に移動しません。
うまくいかなかった解決策
フェイク カラム 便利なビジュアル ガイドからわかるように、基本的には横スクロール レイアウトにするコンテンツ div があります。偽の列は基本的に列を含む背景画像を作成する必要があり、私の背景はパターンであるため、結果の 10,000 ピクセル幅の画像は読み込み時間に深刻な影響を与えます。
茶色の div の高さをピクセルで指定する コンテンツの div は標準の高さではありません。一部のページでは、最長でもブラウザ ウィンドウの下部からわずか数百ピクセル下にあり、他のページでは数千ピクセルです。それらすべてをカバーするために茶色の div を x-千ピクセルの高さにするのは、乱雑で怠惰であり、私は本当にそれに頼る必要はありません。
デュアル背景画像 CSS3 でわかったことは、ボディの背景に 2 つの背景画像を設定できることです。私はこれでほとんどそれを持っていました！個別の画像の正確な詳細を指定する方法はありますか? (たとえば、whitepaper.jpg を繰り返すように設定し、次に brownpaper.jpg を repeat-y のみに設定します) それができれば、それはわかりますが、私が見る限り、両方の画像が同じ属性を持っている必要があります。つまり、もう一度列の画像を数千ピクセルに拡張し、.png にして透明にして背後の白を表示します。
body と html の高さを 100% に設定 何もしませんでした。それは実際に動作しているピンクの div で何かを壊しました。
コード（重要）
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style type="text/css">
html, body {height:100%; margin:0; padding:0;}
body
{
font-family: conquerorsans, Tahoma, verdana, sans-serif;
font-size: 18pt;
color: #9e8166;
letter-spacing:2px;
background-color: #e6e0d5;
background-image:url(images/layout/whitepaper.jpg);
background-repeat: repeat;
background-position:top left;
}
#top-trim
{
position:absolute;
left:90px;
top:0px;
height:20px;
width:550px;
background-image:url(images/layout/brownpaper.jpg);
}
#main-header
{
position:absolute;
left:90px;
top:90px;
height:100%;
bottom:0px;
margin-bottom:0px;
width:550px;
background-image:url(images/layout/brownpaper.jpg);
}
</style>
</head>
<body>
<header id="top-trim">
</header>
<header id="main-header">
</header>
<div style="position:absolute; top:400px; left:700px; width:20px;">
a dsg asd gf asdfg as dfg dfsag df g dfa g afd ga df ga fg a sg a g ag a ga fsa fas dg a sfdg asd g asd ga dsg adsg as dg as g ar ga rg a g asd ads f asd f dsf asd dsaf asd f sda fasd f ads fsd sd dsf asdf a sdgsda f asd a ds fa sdf ads fads f as d asdf sd a sdf asd f asdf asd f asd f ds fsda f f d ads fad sf asd asd sd f asd f a f ds asd fa fa ss ad
</div>
</body>
</html>
それがどのように修正されるかについての考えはありますか？ 上下にスクロールするときはdivを固定し、左右にスクロールするように設定できますか?
これはCSSではできないという結論に達しました。それが javascript、jQuery、さらには php で実行できるものであれば、それも受け入れます。私はこれらの 3 つの言語にはまったく慣れていないので、お手柔らかにお願いします。