- ベストアンサー
firefoxでdivタグ要素が突き抜ける
お世話になります。 firefoxですとdivタグで指定した高さ・幅を要素が超えると 突き抜けて表示されます。IEだと、指定した幅・高さが大きくなってくれる。 以下のソースで子の要素が親のボックス、子のボックスを突き抜けなくできないでしょうか？ もしかしたら簡単なことなのかもしれませんが、 ご教授よろしくお願いいたします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> #oya { border-right:orange 1px solid; border-top:orange 1px solid; border-left:orange 1px solid; border-bottom:orange 1px solid; } #ko { border-right:green 1px solid; border-top:green 1px solid; border-left:green 1px solid; border-bottom:green 1px solid; } </style> </head> <body> <div id="oya" style="width:200px;height:200px;"> <div id="ko" style="width:100px;height:100px;">ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ</div> </div> </body> </html>
- bakenshibakenshi
- お礼率81% (115/141)
- HTML
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
可変して欲しいなら min-height プロパティを用いるべきでは？
その他の回答 (3)
#1で言ってますが、ボックスの大きさが内容量によって変わってしまうのはIEのバグです。この場合、ボックスの大きさが変わらず中身が飛び出すFirefoxが正しいです。 内容物の量によって大きさを変えたいなら、heightを指定しないことですね。
お礼
ratoa様、ご教授有難う御座います。 やはりheightの指定をすると内容物が大きくなると ボックスの大きさは変わらないんですね。 javascriptを作成しないとダメそうですね。。。
- quads
- ベストアンサー率35% (90/257)
回答は既にされているので割愛します。 HTMLソースを提示する際はDTDも併せて提示してください。 確認されている環境、HTMLによって回答が異なる場合があります。
- 345itati
- ベストアンサー率48% (795/1639)
#ko { border-right:green 1px solid; border-top:green 1px solid; border-left:green 1px solid; border-bottom:green 1px solid; overflow: auto; } ではみ出た部分の表示方法をoverflowで指定してやって下さい。autoにすると、定められた大きさより内容がはみ出す場合、スクロールバーが表示されてスクロールする事により中が閲覧出来ます。 デフォルトではoverflow: visible;の値ですが、これで勝手にボックスを拡大してくれるのはIEの余計なお世話です。visibleをどう表示するかはブラウザ依存です。
お礼
345itati様、ご教授有難う御座います。 overflowで、スクロールすることにより閲覧できました。 が、スクロールを出さないで、IEのようにボックスを拡大するようにしたいのですが、出来ないでしょうか？
お礼
quads様、ご教授有難う御座います。 quads様のお教えにより求めていたものが出来ました。 あと逆にIEでDIVがはみ出さないようにすることって 出来るのでしょうか？