Q&A
>右側に全体のスクロール
これがどういう意味かちょっと分からないのですがどういう物ですか？
前提・実現したいこと
htmlとcss初心者です。
よろしくお願いします。
サイトのページを作成しています。
サイトはiphoneのスマホ用です。
htmlとcssのみです。
cssで高さを100vhにしているのですが、
iphoneの画面には、上部のアドレスバーと下部のバー（戻るボタンなどがあるバー）が邪魔して、
下側の一部が見れないです。
これを解決するために調べましたら、以下の「-webkit-fill-available;」を用いると、
バーを含まないで全画面表示されると知りました。
該当のソースコード
@supports (-webkit-touch-callout: none) { body { height: 100vh; height: -webkit-fill-available; } }
上記を踏まえて、以下のコードを記述しましたら、
全画面っぽくはなったのですが、
右側に全体のスクロールが出てしまいますので、全画面に綺麗に収まってはいないようです。
全体のスクロールが出さずに、綺麗に全画面に収まるようにするにはどうすれば良いでしょうか？
html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>question</title> <link href="reset.css" rel="stylesheet" type="text/css"> <link href="style.css" rel="stylesheet" type="text/css"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap" rel="stylesheet"> </head> <body> <div class="common_header"><a>← もどる</a><p>がっこう</p></div> <div class="common_top"> <div class="dialogue_left"><p>テストテストテスト？</p></div> <div class="dialogue_left"><p>テストテストテスト？</p></div> <div class="dialogue_left"><p>テストテストテスト？</p></div> <div class="dialogue_left"><p>テストテストテスト？</p></div> </div> <div class="common_bottom"> <ul class="question_options"> <li class="btn_animation_01">テストテストテストテストテストテスト</li> <li class="btn_animation_02">テストテストテストテストテストテスト</li> <li class="btn_animation_03">テストテストテストテストテストテスト</li> <li class="btn_animation_04">テストテストテストテストテストテスト</li> </ul> </div> </body> </html>
css
@charset "UTF-8"; /* CSS Document */ @supports (-webkit-touch-callout: none) { body { height: 100vh; height: -webkit-fill-available; width: 100vw; font-family: 'Noto Sans JP', sans-serif; font-size: 16px; line-height: 30px; box-sizing: border-box; } } /* 共通ヘッダー部分 */ .common_header { height: 8vh; width: 100vw; top: 0px; position:absolute; display: flex; background-color: #FFFFFF; line-height: 8vh; -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); box-shadow: 0px 3px 3px rgba(0,0,0,0.2); z-index: 2; } .common_header p { padding-left: 5vw; } .common_header a { width: 25vw; background-color: #4B89FF; color: #FFFFFF; text-align: center; } /* 共通トーク部分 */ .common_top { height: 50vh; width: 100vw; background: linear-gradient(to bottom, #00BF06 0%, #007404 100%); padding-left: 5vw; padding-right: 5vw; padding-top: 10vh; overflow-y: scroll; box-sizing: border-box; } .common_top .dialogue_left { background-image: url("img/face_icon_left.png"); background-repeat: no-repeat; } .common_top .dialogue_left p { display: block; padding-top: 3vh; padding-right: 3vw; padding-left: 3vw; padding-bottom: 3vh; border-radius: 12px; background-color: #FFFFFF; line-height: 24px; margin-bottom: 5vh; margin-left: 65px; } /* 共通背景とキャラクターイメージ部分 */ .common_bottom { background-image: url(img/bg_talking_bottom.png); height: 40vh; width: 100vw; background-size: cover; -webkit-box-shadow: 0px -3px 3px rgba(0,0,0,0.2); box-shadow: 0px -3px 3px rgba(0,0,0,0.2); position: absolute; bottom: auto; z-index: 3; } /* 四択ボタン部分 */ .question_options li { height: 10vh; width: 100vw; display: inline-block; list-style: none; text-align: center; background-color: #FFFFFF; } .btn_animation_01 { animation: slidein_from_bottom 0.8s ease-in-out 0s forwards; } .btn_animation_02 { animation: slidein_from_bottom 1s ease-in-out 0s forwards; } .btn_animation_03 { animation: slidein_from_bottom 1.2s ease-in-out 0s forwards; } .btn_animation_04 { animation: slidein_from_bottom 1.4s ease-in-out 0s forwards; } @keyframes slidein_from_bottom { 0% {transform: translateY(40vh);} 0% {opacity: 0} 100% {transform: translateY(0vh);} 100% {opacity: 100} }
[追記]
.common_top の overflow-y: scroll;
は、common_top部分のみのスクロールで、これはこのままで大丈夫です。
試したこと
cssファイルで、common_topやcommon_bottomのheightをvhではなく、%表記にしてみたり、
box-sizing: border-boxを消したり、display: block;を消したりいろいろ触ってみましたが、
全画面にぴったり収まる方法がわかりませんでした。
bodyタグ内のdivタグをすべて消して見ると、スクロールなしの全画面表示にはなりました。
ただ、そのあと、<div class="common_top">や<div class="common_bottom">を入れると
全画面になりませんでした。
以上、よろしくお願いします！
ご連絡ありがとうございます。
画面の右側に、上下のスクロールバーが出てしまい、少し下にスクロールできる状態になってしまいます。
もし可能であれば、こちら見てもらえればわかるかと思います。
http://cambodia-trading.sakura.ne.jp/new/question.html
iphoneで見てもらえればわかるかと思います。
ん？スクロールするのがそもそも意図した仕様じゃないのなら
overflowのscrollを消せばいい話では？
まぁそのままだと全て表示されないとは思うのでメッセージ？を表示する範囲を広げるとか。
overflowのscrollですが、これは、<div class="common_top">の中で会話文をLINEチャットみたいに表示したいので、そのためのスクロールになります。
ただ、仮にスクロールを消して見ても、全体のスクロールはされてしまいます。
<div class="common_top">と<div class="common_bottom">のheightの割合は、デザイン上、６：４で決まっているのでそこは変えられないんです。
こちらの確認不足だったので削除.
度々申し訳ない、結果的に得たい結果は全体のスクロールが出来ない状態になればよろしいんでしょうか？
ご連絡ありがとうございます。
今、試してみましたら、
URLリンクをそのままクリックして開いた時は、スクロールはないですね。失礼しました。
（ただ、<div class="common_bottom">部分の下に空白ができてしまってますね）
URLリンクをコピーして、iphoneのsafariのアドレスバーに貼り付けて開くと、スクロールバーが出て少し下に動かせてしまいます。
度々申し訳ない、結果的に得たい結果は全体のスクロールが出来ない状態になればよろしいんでしょうか？
→ はい！おっしゃる通りです！
そのために、bodyタグのheightを100vhにして、
それに合わせるように
<div class="common_top">を60vh
<div class="common_bottom">を40vh
にしました。６０＋４０で１００なのに、なぜ下に少しずれてしまうのかがわかりません。
bodyタグ内に
height: -webkit-fill-available;
も入れているのですが。
回答1件
0
CSS
1body { 2 overflow: hidden; 3}
で、全体のスクロールは禁止できるはずですが、iosはbodyへのoverflow: hidden;が効かなかった
気がするので、その場合は、body直下にdivを作ってそれに対してoverflow: hidden;としてみて
ください。
投稿2021/04/07 07:29
総合スコア1282
ありがとうございます。早速試してみます！
**** html ****
<body>
<div class="common_all">
<div class="common_header"><a>← もどる</a><p>がっこう</p></div>
<div class="common_top">
<div class="dialogue_left"><p>テストテストテスト</p></div>
<div class="dialogue_left"><p>テストテストテスト</p></div>
<div class="dialogue_left"><p>テストテストテスト</p></div>
<div class="dialogue_left"><p>テストテストテスト</p></div>
</div>
<div class="common_bottom">
<ul class="question_options">
<li class="btn_animation_01">テストテストテストテストテストテスト</li>
<li class="btn_animation_02">テストテストテストテストテストテスト</li>
<li class="btn_animation_03">テストテストテストテストテストテスト</li>
<li class="btn_animation_04">テストテストテストテストテストテスト</li>
</ul>
</div>
</div>
</body>
**** css ****
.common_all {
overflow: hidden;
}
上記でやって見ましたが、変わらずでした。
ちなみに、<div class="common_all">を作らないで、cssファイルのbody内に直接overflow: hidden;を入れた場合は、スクロールバーが出ましたが、カクカクして下に１段ずれる みたいな挙動になりました。
因みに
@supports (-webkit-touch-callout: none) {
body {
height: 100vh;
min-height: -webkit-fill-available;
}
}
としたらどうなります？
下に余白ができて、先ほどよりも下にたくさんスクロールされてしまいます
あなたの回答
tips
プレビュー
