46

2つの内部divを保持するコンテナdivがあります。両方とも、コンテナ内で100％の幅と100％の高さを取る必要があります。

両方の内部divを100％の高さに設定しました。これはFirefoxで正常に機能しますが、IEではdivは100％の高さまでは伸びず、その中のテキストの高さだけに伸びます。

以下は私のスタイルシートの簡略版です。

#container
{
   height: auto;
   width: 100%;
}

#container #mainContentsWrapper
{
   float: left;

   height: 100%;
   width: 70%;
   margin: 0;
   padding: 0;
}


#container #sidebarWrapper
{      
   float: right;

   height: 100%;
   width: 29.7%;
   margin: 0;
   padding: 0;
}

私が間違っていることはありますか？または、私が見逃しているFirefox / IEの癖はありますか？

4

8 に答える 8

74

「Firefox で正常に動作する」というのはQuirks モードのレンダリングのみだと思います。標準モードのレンダリングでは、Firefox でもうまく動作しない場合があります。

パーセンテージは、ビューポートではなく、「包含ブロック」に依存します。

CSS仕様は言う

パーセンテージは、生成されたボックスの包含ブロックの高さに関して計算されます。包含ブロックの高さが明示的に指定されておらず (つまり、コンテンツの高さに依存する)、この要素が絶対配置されていない場合、値は 'auto' に計算されます。

それで

#container { height: auto; }
#container #mainContentsWrapper { height: n%; }
#container #sidebarWrapper { height: n%; }

意味

#container { height: auto; }
#container #mainContentsWrapper { height: auto; }
#container #sidebarWrapper { height: auto; }

ビューポートの 100% の高さまで伸ばすには、包含ブロック (この場合は #container) の高さを指定する必要があります。さらに、最初の Containing Block は「UA 依存」であるため、body と html にも高さを指定する必要があります。

あなたに必要なのは...

html, body { height:100%; }
#container { height:100%; }
于 2008-10-06T22:26:53.287 に答える
2

コンテナのマージンを0に設定すると、これを機能させることに成功しました。

#container
{
   margin: 0 px;
}

他のすべてのスタイルに加えて

于 2008-10-06T14:51:22.677 に答える
2

実際に使用しているhtmlを見ずに、良い答えを出すのは難しいです。

Doctypeを出力していますか/標準モードのレンダリングを使用していますか？実際にhtmlの再現を調べることができなければ、FirefoxとInternetExplorerのhtmlの解釈の違いを最初に推測することになります。

于 2008-10-06T01:36:30.363 に答える
2

あなたが解決している問題はわかりませんが、同じ高さである必要がある2つのコンテナが並んでいる場合、ページの読み込み時に小さなjavascriptを実行して、2つの最大の高さを見つけ、もう一方を明示的に設定します同じ高さ。height: 100% は、「最大のコンテンツの両方のサイズにする」ことが本当に必要な場合に、「コンテンツを完全に含めるために必要なサイズにする」ことを意味するように思えます。

注: ページ上で高さを変更する何かが発生した場合 (検証の概要が表示されたり、折りたたみ可能なメニューが開いたりする場合など)、サイズを再度変更する必要があります。

于 2008-10-06T01:46:21.467 に答える
1

私は「tvanfosson」が言ったことと非常によく似た何かをしました。つまり、実際にはJavaScriptを使用して、onresizeなどのイベントを介してウィンドウで使用可能な高さを常に監視し、その情報を使用して、それに応じてコンテナーサイズを変更します（パーセンテージではなくピクセルとして） ）。

これはJavaScriptの依存関係を意味し、CSSソリューションほどスムーズではないことに注意してください。また、JavaScript関数がすべての主要なブラウザーでウィンドウのサイズを正しく返すことができることを確認する必要があります。

問題を解決するためのより良い方法のように思われるので、前述のCSSソリューションの1つが機能するかどうかをお知らせください。

于 2008-10-06T13:25:04.940 に答える
1

次のいずれかまたは両方を配置する必要がある場合があります。

html { height:100%; }

また

body { height:100%; }

編集：おっと、彼らが浮かんでいることに気づかなかった。コンテナをフロートさせる必要があります。

于 2008-10-06T00:43:30.063 に答える
0

IEは高さ/幅を設定するためのautoの使用をサポートしていないと思うので、これに数値を指定してみてください（Jarettが提案しているように）。

また、フロートを適切にクリアしているようには見えません。これを#containerのCSSに追加してみてください。

#container {
    height:100%;
    width:100%;
    overflow:hidden;
    /* for IE */
    zoom:1;
}
于 2008-10-06T13:10:34.267 に答える
0

これを試して..

#container
{
   height: auto;
   min-height:100%;
   width: 100%;
}

#container #mainContentsWrapper
{
   float: left;

   height: auto;
   min-height:100%
   width: 70%;
   margin: 0;
   padding: 0;
}


#container #sidebarWrapper
{      
   float: right;

   height: auto;
   min-height:100%
   width: 29.7%;
   margin: 0;
   padding: 0;
}
于 2009-12-15T11:08:10.957 に答える