0

divを使用してテーブルの動作をシミュレートしたいと思います。

レイアウトの構造体を3つの列に分割しています。

div#wrapper {
  width:800px;
  float:left;
  height:100%;
  margin-top:7px;
  text-align:center;
}
div#left {
  width:167px;
  float:left;
  padding-bottom:50px;
  margin-right:3px;
}
div#main {
  width:454px;
  float:left;
}
div#right {
  width:167px;
  float:left;
  margin-left:3px;
}

ラッパーは、左、メイン、右の3列のコンテナーです。

div "main"の内容は可変であるため、長い場合と非常に短い場合があります。コンテンツが異なる場合、divラッパーが適応され、問題はありませんが、左右の列はラッパーに適応しません。

PS doctypeがなくても問題はありません。実際、左、メイン、右の高さを100％に設定しましたが、transional.dtdを挿入すると、divの高さは考慮されません。

この問題をどのように解決できますか？

私の英語でごめんなさい！

4

4 に答える 4

1

@Neurofluxation に同意するので、Google で何が見つかるか見てみましょう。

CSSと CSS 偽列を使用した高さ 100% のレイアウト

于 2010-03-17T11:25:08.207 に答える
0

使ってみます

min-height:100%;

しかし、私は問題を解決することができます。

xhtml固定の高さで可能ではない別のフォーラムで読んだ：divで100％、そしてこの問題を解決する唯一の方法はJQueryを使用することですか？

于 2010-03-17T10:54:22.003 に答える
0

あなたは挿入しようとすることができます：

min-height: 100%;

同様に、自分自身をカバーするために:)

于 2010-03-17T10:43:55.230 に答える
-1

jQueryを使用する必要があります

<script type = "text / javascript">
$（this）.load（function（）{
   alert（document.documentElement.clientHeight +'+' + $（window）.height（））;
   if（$（window）.height（）-250> 300）
      $（'＃content'）。css（'min-height'、 '224px'）;
   そうしないと
      $（'＃content'）。css（'min-height'、$（window）.height（）-250）;
    }
）;
$（this）.resize（function（）{
    if（$（window）.height（）-250> 300）
       $（'＃content'）。css（'min-height'、 '224px'）;
    そうしないと
       $（'＃content'）。css（'min-height'、$（window）.height（）-250）;
    }
）;
</ script>

<div id = "content" style = "min-height：350px;">

</ div>

高さの数字を変更するだけです。

于 2010-03-17T10:59:40.717 に答える