ブラウザ以外のブラウザに余白や余白がある場合、 '高さ：100％'または '幅：100％'を使用しますか？

のは、私は次のコードを持っているとしましょう -ブラウザ以外のブラウザに余白や余白がある場合、 '高さ：100％'または '幅：100％'を使用しますか？

<body> 
<div id="outerdiv" 
    style="border: 1px solid blue; height: 150px; width: 150px;"> 
    <div id="div" style="height: 100%; border: 1px solid black; margin: 5px;"> 
     <div id="innerdiv" style="height: 100%; 
      border: 1px solid red; margin: 5px;"> 
    </div> 
</div> 
</body> 
</html>

これはFF/Chromeで次のような結果が得られます。IEでは

ruroh

が、それは大丈夫です。問題は、「高さ：100％」をどのように使用すれば、IEがすべてのブラウザでそれをレンダリングするかがわかりますか？

EDIT：100％：ここは（私にとって）IE9での結果であるこれは、私はそれが高さを使用して、すべてのブラウザで次のようになりたいものです。それも可能ですか？

enter image description here

出典

2011-07-07 Matt

あなたのコードは私にあなたが提供された画像のようにFFとChromeで同じ結果を与えます。どのブラウザに問題がありましたか？ –

私はSafari 5.0.4、Chrome 13.0.782.41、FF 3.5のコピーの最初の画像のように見えます。どちらが期待された動作ですが、なぜGabyとYanirが別の方法で見ているのか分かりません。

height:100%を設定する別のアプローチは、そうのようないくつかの絶対位置div Sでtop、left、right、及びbottom値を設定することであろう。

<div id="outerdiv" 
style="border: 1px solid blue; height: 150px; width: 150px; position:relative;"> 
<div id="div" style="border: 1px solid black; top: 5px; bottom: 5px; left:5px; right:5px; position:absolute;"> 
    <div id="innerdiv" style="top: 5px; bottom: 5px; left:5px; right:5px; 
     border: 1px solid red; position:absolute;"> 
</div>

参照http://jsfiddle.net/gCqqn/

出典

2011-07-08 00:42:37

ええ、私も最初の画像を取得しています。私は高さまたは幅= 100％を使用することは完全に非実用的であると結論づけました...何かが欠けていますか？ – Matt

彼らは間違いなくその実用的な使い方（幅：100％以上）を持っています。それはそのマージンとパディングがボックスに追加されていて、元の問題と同じように100％に追加するとオーバーフローします。 –