こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

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;
}

アドバイスよろしくお願いします。

投稿日時 - 2018-05-07 12:26:35

QNo.9496008

困ってます

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

>回答No.1 amanojaku1

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

投稿日時 - 2018-05-07 21:50:32

ANo.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"><!--
.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>

投稿日時 - 2018-05-07 13:48:12

あなたにオススメの質問