私はずっと探していました。申し訳ありませんが、私はこの時点でかなり必死なので、ここで質問しようと思いました. 以下は HTML サンプルです。列 B が 1 ページよりも長い場合 (ビューポート、申し訳ありませんが、ここで正しい用語がわかりません)、A と C はコンテナー div を埋めるために高さを拡張しません。それらはページ全体を埋めますが、列 B が 1 ページより長い場合でも、1 ページの長さで停止します。どんなアイデアでも、私は髪を引っ張ってきました。高さと最小高さで遊んでいますが、何も機能していないようです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
html, body
{
height: 100%;
background-color: gray;
padding: 0;
margin: 0;
}
#container
{
height: 100%;
margin: auto;
padding: 0px;
width: 610px;
}
#a
{
width: 5px;
min-height: 100%;
float: left;
background-color: yellow;
}
#b
{
width: 600px;
background-color: Blue;
float:left;
min-height: 100%;
}
#c
{
width: 5px;
float:left;
min-height: 100%;
background-color: green;
}
</style>
</head>
<body>
<div id="container">
<div id="a"></div>
<div id="b">
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
</div>
<div id="c"></div>
</div>
</body>
</html>
編集: 1 つのピクセルを水平方向にグラブしてからタイリングすることについて説明する誰かの時間を無駄にする前に、デザイナーが垂直方向のグラデーションを与えてくれたということです。上から暗く始まり、明るく終わります。それと影の効果。影が横に走っています。したがって、これをスライスして、私の知る限り、タイリングを巧みに使用する方法はありません。