web-dev-qa-db-ja.com

Div 100％の高さはFirefoxでは機能しますが、IE

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の癖はありますか？

htmlcssinternet-explorerfirefox
46
Marcel

「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です）。さらに、最初の包含ブロックは「UA依存」であるため、bodyおよびhtmlの高さも指定する必要があります。

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

html, body { height:100%; }
#container { height:100%; }
75
timeblue

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

#container
{
   margin: 0 px;
}

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

2
casademora

実際に使用しているHTMLを見ることなく、適切な答えを出すのは困難です。

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

2
bryansh

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

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

2
tvanfosson

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

html { height:100%; }

または

body { height:100%; }

編集：フープ、彼らが浮かんでいることに気づかなかった。コンテナをフロートさせるだけです。

1
Jarett Millard

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

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

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

1
Matt Refghi

これを試して..

#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;
}
0
Designerfoo

IEは高さ/幅の設定にautoの使用をサポートしているので、これに数値を指定してみてください（Jarettが示唆しているように）。

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

#container {
    height:100%;
    width:100%;
    overflow:hidden;
    /* for IE */
    zoom:1;
}
0
Ian Oxley