締切済み

CSSでdivが縦にはみ出る問題

2018/05/07 12:26

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; } アドバイスよろしくお願いします。

shiro857
お礼率27% (59/216)

CSS
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

みんなの回答

amanojaku1
ベストアンサー率54% (265/488)

2018/05/07 21:50 回答No.2

>回答No.1　amanojaku1 もし、AndroidならAndroid版「Opera Mini Web ブラウザ」をインストールして確認してみて下さい。

ログインすると、全ての回答が全文表示されます。

amanojaku1
ベストアンサー率54% (265/488)

2018/05/07 13:48 回答No.1

>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"></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>

ログインすると、全ての回答が全文表示されます。