0

左中央と右の 3 つの div に分割されたページがあります。左右に何も表示したくありません。ページをフレームに収めるだけです。

    #leftDiv
{
    background-color: Gray;
    width: 10%;
    left: 0px;
    top: 0px;
    position: absolute;
    height: 100%;
}

#rightDiv
{
    background-color: Gray;
    height: 100%;
    width: 10%;
    left: 90%;
    top: 0px;
    position: absolute;
    clear:both;
}

中央の div にはテーブルがあり、ユーザーは表示する行数を選択できます。大きな値を選択すると、テーブルの本体が左右の div の下部を超えてしまいます。

これを修正するには、次のコードを入れます

if ($("#leftDiv").length == 1) {
                $("#leftDiv").height($("body").height() + "px");
            }
            if ($("#rightDiv").length == 1) {
                $("#rightDiv").height($("body").height() + "px"); ;
            }

これは、ユーザーがページ サイズよりも大きな値を選択した後、小さな値を選択するまで問題なく機能します。次に、左右の div が 100% 未満に設定されます。私が必要としているのは、ピクセル単位で 100% を調べる方法です。これを体の高さと比較して、どちらが大きいかを判断できます。

何か案は？

ありがとう

ジョン

4

3 に答える 3

3

ページを構成するために空の要素を作成するのはなぜですか? body背景を必要な色に設定し、次のようにします。

#center_div {width: /* whatever */;
             margin: 0 auto; /* to center in the viewport */
             overflow: auto; /* or visible */
}

プロパティを省略し、代わりに(これがどのようにクロス ブラウザーと互換性があるか思い出せません)overflow単純に使用して、「通常の」幅を定義し、コンテンツによって div が次のように大きくなるようにすることができます。コンテンツを表示するために必要です。min-widthwidth

于 2009-11-16T16:16:28.237 に答える
3

使用するmargin: 0 auto

左右の列を削除し、メインの div に幅を与えてから、自動左右マージンを使用してその div を中央に配置します。例えば：

#mainDiv {
  width: 80%;
  margin: 0 auto;
}
于 2009-11-16T16:13:36.200 に答える
0

左右の div にコンテンツがない場合、それらを個別の div にする必要はありません。代わりに、それらのフォーマットをコンテナー div に適用し、 を使用してコンテンツ div を中央に配置しますmargin: 0 auto。明らかに、コンテナ div に指定された幅と透明でない背景を与える必要があります。その後、必要に応じてブラウザにウィンドウのサイズ変更を任せることができます。その部分のために車輪を再発明する必要はありません。

CSS:

#container {background-color:gray;}
#content {background-color:white;width:80%;margin:0 auto;}

HTML:

...
<body>
<div id="container">
<div id="content">
...your content here...
</div>
</div>
</body>
...

(ページにコンテナ div がない場合は、代わりに背景色を body 要素に適用して、さらに多くのコードを節約できます。)

于 2009-11-16T16:15:53.293 に答える