1

大きなコンテンツを下にスクロールした場合でも、固定幅の 2 つの列でそれぞれ独自の背景色を持ち、ページの高さ全体に広がるページを作成したいと考えています。明確にするための簡単な図: https://dl.dropbox.com/u/3060536/twocol.png

私は、私が望むことをほとんど行ういくつかのソリューションを見つけました。

  • どこにでも置いheight:100%ても、スクロールしない限り見栄えがします。これは、画面の高さに比例しているようです (長いテキストを下にスクロールすると、背景が消えます)。
  • htmlheight:100%と body をmin-height:100%配置し、div の 1 つに配置すると、1 つの列で高さ全体を埋めることができます。しかし、これは本体のすぐ下で行う必要があるため、私が望む中央の 2 列のレイアウトとは組み合わせることができないようです。
  • 列padding-bottom:100000pxと親にmargin-bottom:-100000pxとを配置するとoverflow-y:hidden、すべてが画面に収まる場合は正常に機能しますが、テキストが画面に収まらない場合は下にスクロールするオプションが完全に削除されます。

したがって、上記のどれも私が望むことをしません。これを行う適切な方法は何ですか？

4

3 に答える 3

0

あなたはおそらくここでいくつかのアイデアを得ることができます..position：relativeが気にならない場合は、これを試してください。

<html>
<head>
<title>sample</title>
</head>

<body style="height:100%;">

<center>
    <div style="position:relative; width:900px; height:100%;">

        <div style="position:relative; float:left; background-color:blue; width:200px; height:auto; min-height:100%;">
            '//some texts or controls
        </div>


        <div style="position:relative; float:left; background-color:green; width:700px; height:auto; min-height:100%;">
            '//some texts or controls
        </div>

    </div>
</center>   

</body>
</html>
于 2013-03-03T06:23:18.173 に答える
-1

私はこれをテストしてleft: 50%; margin-left: -450pxいませんが、要素を中央に配置するのにうまく機能しないことは間違いありません。しかし、iveがhtmlを実行してからしばらく経ちました。

#background: {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 900px;
    left: 50%;
    margin-left: -450px;
    background-color: red;
}
#background div {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 200px;
    background-color: blue;
}

そしてHTML

<div id="content"></div>
<div id="background"><div></div></div>

アップデート

私が言ったように、それはテストされていませんでした。heightまたはbottomを含めるのを忘れたことがわかり#backgroundました。おそらく他の何かも含まれています。

これが機能するアイデアの例ですhttp://jsfiddle.net/bEuTU/

于 2013-03-03T00:54:38.227 に答える
-1

ブログ投稿をご覧ください。それがどのように機能するかを理解するのに少し時間がかかりましたが、それは素晴らしいことです.

于 2013-03-03T01:12:35.723 に答える