- 締切済み
CSSでdivが縦にはみ出る問題
HTMLとCSSについての質問です <div class="wrapper"> <div class"first"></div> <div class"second"></div> <div class"third"></div> </div> このようなHTMLがあります。 その際にfirst,secondのクラスはwrapper内に収まるのですが、最後のthirdクラスのみwrapperクラスから下にはみ出て表示されてしまいます。 thirdクラスもwarpper内に収めたいのですが、どうすれば良いのでしょうか？ ちなみに今はレスポンシブのcssを書いていますが、PC版のCSSではしっかりとwrapperクラス内にすべてのdivが収まっています。 CSSは以下の通りです。 .wrapper{ position:relative; } .first{ position:absolute; top: 0; left: 0; } .second{ height: 500px; } .third{ height: 500px; } アドバイスよろしくお願いします。
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- amanojaku1
- ベストアンサー率54% (265/488)
>回答No.1 amanojaku1 もし、AndroidならAndroid版「Opera Mini Web ブラウザ」をインストールして確認してみて下さい。
- amanojaku1
- ベストアンサー率54% (265/488)
>PC版のCSSではしっかりとwrapperクラス内にすべてのdivが収まっています。 ブラウザー側の問題では？ Android版「Opera Mini Web ブラウザ」では正常に表示されました。 Opera Mini Web ブラウザ https://play.google.com/store/apps/details?id=com.opera.mini.native&referrer=utm_source%3Dgoogle_via_opera_com%26utm_medium%3Dose%26utm_campaign%3Dgoogle_ose_via_opera_com%26utm_content%3D%2Fja%2Fmobile%2Fmini%2Fandroid_via_mobile-mini-android-top ページのソースは下記。 <html> <head> </head> <style type="text/css"><!-- .wrapper{ position:relative; } .first{ position:absolute; top: 0; left: 0; } .second{ height: 500px; } .third{ height: 500px; } --></style> <body> <div class="wrapper" style="background-color:#0000ff"> <div class="first" style="background-color:#00ff00"> <br></div> <div class="second" style="width:50%; background-color:#00ffff"></div> <div class="third" style="width:50%; background-color:#ff0000"></div> </div> </body> </html>
