質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.54%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

1回答

636閲覧

cssでbodyタグの中にdiv.wrapperで囲っていてmin-heght:100vh;を指定しているのに、なかの要素がwapperをはみ出る原因を教えてください。

yuyuyu88

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

1グッド

0クリップ

投稿2023/04/13 14:17

実現したいこと

wapperの中に要素を収めたい。

前提

おそらく、cssの高さ指定の概念の理解が間違っていると思います。
要素がwrapperの下にはみ出てしまいます。
原因を教えてください。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <link rel="stylesheet" href="style.css"> 9</head> 10<body> 11 <div class="wrapper"> 12 <header class="key-visual"> 13 <h1 class="main-title"><img class="main-image"src="image\logo (3).svg"></h1> 14 <nav> 15 <ul> 16 <li><a href="#MENU">MENU</a></li> 17 <li><a href="#ABOUT">ABOUT</a></li> 18 <li><a href="#LOCATION">LOCATION</a></li> 19 </ul> 20 </nav> 21 </header> 22 <section id="MENU" class="sec1"> 23 <div id="title" class="sec1-title"><h1>MENU</h1></div> 24 <div class="MENU"> 25 <div class="MENU-container"> 26 <div class="COFFEE"> 27 <h2>COFFEE</h2> 28 <dl> 29 <dt>XXXXXXXX</dt> 30 <dd>¥500</dd> 31 <dt>XXXXXXXX</dt> 32 <dd>¥500</dd> 33 <dt>XXXXXXXX</dt> 34 <dd>¥500</dd> 35 <dt>XXXXXXXX</dt> 36 <dd>¥500</dd> 37 <dt>XXXXXXXX</dt> 38 <dd>¥500</dd> 39 <dt>XXXXXXXX</dt> 40 <dd>¥500</dd> 41 <dt>XXXXXXXX</dt> 42 <dd>¥500</dd> 43 <dt>XXXXXXXX</dt> 44 <dd>¥500</dd> 45 <dt>XXXXXXXX</dt> 46 <dd>¥500</dd> 47 <dt>XXXXXXXX</dt> 48 <dd>¥500</dd> 49 </dl> 50 </div> 51 <div class="right"> 52 <div class="FOOD"> 53 <h2>FOOD</h2> 54 <dl> 55 <dt>XXXXXXXX</dt> 56 <dd>¥500</dd> 57 <dt>XXXXXXXX</dt> 58 <dd>¥500</dd> 59 <dt>XXXXXXXX</dt> 60 <dd>¥500</dd> 61 </dl> 62 </div> 63 <div class="OTHER"> 64 <h2>OTHER</h2> 65 <dl> 66 <dt>XXXXXXXX</dt> 67 <dd>¥500</dd> 68 <dt>XXXXXXXX</dt> 69 <dd>¥500</dd> 70 <dt>XXXXXXXX</dt> 71 <dd>¥500</dd> 72 </dl> 73 </div> 74 </div> 75 </div> 76 </div> 77 </section> 78 <section id="ABOUT" class="sec2"> 79 <div id="title" class="sec2-title"><h1>ABOUT</h1></div> 80 <h2 class="sec2-main">COFFEE</h2> 81 <div class="sec2-container"> 82 <ul> 83 <li class="item"> 84 テキストテキストテキストテキストテキストテキストテキストテキスト 85 テキストテキストテキストテキストテキストテキストテキストテキスト 86 テキストテキストテキストテキストテキストテキストテキストテキスト 87 テキストテキストテキストテキストテキストテキストテキストテキスト 88 </li> 89 <li class="item"> 90 テキストテキストテキストテキストテキストテキストテキストテキスト 91 テキストテキストテキストテキストテキストテキストテキストテキスト 92 テキストテキストテキストテキストテキストテキストテキストテキスト 93 テキストテキストテキストテキストテキストテキストテキストテキスト 94 </li 95 > 96 <li class="item"> 97 テキストテキストテキストテキストテキストテキストテキストテキスト 98 テキストテキストテキストテキストテキストテキストテキストテキスト 99 テキストテキストテキストテキストテキストテキストテキストテキスト 100 テキストテキストテキストテキストテキストテキストテキストテキスト 101 </li 102 > 103 <li class="item"> 104 テキストテキストテキストテキストテキストテキストテキストテキスト 105 テキストテキストテキストテキストテキストテキストテキストテキスト 106 テキストテキストテキストテキストテキストテキストテキストテキスト 107 テキストテキストテキストテキストテキストテキストテキストテキスト 108 </li 109 > 110 </ul> 111 </div> 112 <div class="READ"> 113 <h3>Read More</h3> 114 </div> 115 116 </section> 117 <section id="LOCATION" class="sec3"> 118 <div id="title" class="sec3-title"><h1>LOCATION</h1></div> 119 </section> 120 <footer> 121 © COFFEE 122 </footer> 123 </div> 124 125</body> 126</html>

CSS

1@charset "utf-8"; 2 3* { 4 margin: 0; 5 padding: 0; 6 box-sizing: border-box; 7} 8 9.wrapper { 10 width: 100%; 11 min-height: 100vh; 12 display: flex; 13 flex-direction: column; 14 background-color: lightsalmon; 15} 16 17html { 18 scroll-behavior: smooth; 19} 20 21/* header */ 22 23.key-visual { 24 width: 100%; 25 height: 700px; 26 background-image: url(image/mainvisual2.jpg); 27 background-repeat: no-repeat; 28 background-size: cover; 29 background-position: center; 30 position: relative; 31} 32.main-title { 33 position: absolute; 34 height: 100%; 35 width: 100%; 36 display: flex; 37 align-items: center; 38 justify-content: center; 39} 40.main-image { 41 width: 500px; 42 filter: drop-shadow(1px 1px 10px #c0c0c0); 43} 44 45header nav { 46 display: flex; 47 justify-content: right; 48 width: 100%; 49 height: 90px; 50 position: relative; 51} 52header nav ul { 53 position: absolute; 54 width: 250px; 55 height: 100%; 56 display: flex; 57 align-items: center; 58 justify-content: space-between; 59 margin-right:40px; 60} 61 62header nav ul li { 63 list-style: none; 64} 65header nav ul li a { 66 text-decoration: none; 67 color: white; 68 font-weight: bold; 69 filter: drop-shadow(1px 1px 2px #121212 ); 70} 71 72header nav ul li a:hover { 73 color: red; 74 transition: .5s; 75} 76 77/* title-img */ 78 79#title { 80 width: 100%; 81 height: 350px; 82 margin-top: 20px; 83 background-color: #fff; 84 border: 1px solid black; 85 position: relative; 86} 87 88.sec1-title { 89 position: absolute; 90 width: 100%; 91 height: 100%; 92 background-image: url(image/menu.jpg); 93 background-attachment: fixed; 94 background-size: cover; 95 background-position: center; 96} 97.sec2-title { 98 position: absolute; 99 width: 100%; 100 height: 100%; 101 background-image: url(image/about.jpg); 102 background-attachment: fixed; 103 background-size: cover; 104 background-position: center; 105} 106.sec3-title { 107 position: absolute; 108 width: 100%; 109 height: 100%; 110 background-image: url(image/location.jpg); 111 background-attachment: fixed; 112 background-size: cover; 113 background-position: center; 114} 115 116#title h1 { 117 position: absolute; 118 top: 35%; 119 left: 35%; 120 color: #fff; 121 font-weight: 700; 122 font-size: 80px; 123} 124 125 126/* MENU */ 127 128.MENU { 129 width: 100%; 130 height: 950px; 131 padding: 150px 300px; 132 display: flex; 133 justify-content: center; 134 position: relative; 135} 136 137.MENU .MENU-container { 138 position: absolute; 139 display: flex; 140 max-width: 1000px; 141 position: relative; 142} 143.COFFEE { 144 display: flex; 145 flex-direction: column; 146 height: 100%; 147 width: 50%; 148 justify-content: center; 149 position: relative; 150} 151h2 { 152 width: 200px; 153 display: flex; 154 justify-content: center; 155 border-bottom: 5px solid red; 156 margin-bottom: 60px; 157} 158 159 160.FOOD { 161 padding-top: 10px; 162 width: 100%; 163 height: 100%; 164 margin-bottom: 55px; 165} 166.OTHER { 167 width: 100%; 168 height: 100%; 169} 170.right { 171 display: flex; 172 width: 50%; 173 height: 100%; 174 flex-direction: column; 175 justify-content: space-between; 176} 177 178dl { 179 width: 100%; 180 display: flex; 181 flex-wrap: wrap; 182} 183dl dt { 184 width: 80%; 185 border-bottom: dotted 1px black; 186 margin-bottom: 25px; 187} 188dl dt dd { 189 width: 20%; 190 margin-bottom: 25px; 191} 192.MENU h2 { 193 font-size: 50px; 194} 195 196/* ABOUT */ 197 198.sec2 { 199 width: 100%; 200 height: 900px; 201 position: relative; 202} 203.sec2 .sec2-main { 204 position: absolute; 205 width: 150px; 206 left: 50%; 207 transform: translate(-50%); 208 margin: 100px 0; 209} 210.sec2-container { 211 position: absolute; 212 left: 50%; 213 transform: translate(-50%); 214 margin-top: 250px; 215 width: 90%; 216 height: 600px; 217 background-color: aqua; 218 position: relative; 219} 220.sec2-container ul { 221 position: absolute; 222 display: flex; 223 justify-content: center; 224 flex-wrap: wrap; 225} 226 227.sec2-container .item { 228 width: 520px; 229 height: 150px; 230 padding: 10px; 231 margin: 10px; 232 background-color: chartreuse; 233} 234.sec2-container ul li { 235 list-style: none; 236} 237 238.READ { 239 width: 100%; 240 height: 100px; 241 position: relative; 242} 243 244.READ h3 { 245 width: 200px; 246 position: absolute; 247 display: flex; 248 align-items: center; 249 justify-content: center; 250 background-color:lightskyblue; 251} 252 253/* footer */ 254 255footer { 256 width: 100%; 257 height: 20px; 258 display: flex; 259 justify-content: center; 260 align-items: center; 261 background-color: aqua; 262}
hatena19👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

min-heght は最小の高さを指定するものです。min-heght:100vh;は、この要素の中身の高さが100vhより小さくて気も、要素の高さは 100vh を保つということです。中身の高さが100vhを上回れば、それにこの要素の高さもそれに合わせて拡張します。

heght:100vh;と設定すれば高さは100vhで固定されます。

ただ、「wapperの中に要素を収めたい。」とのことですが、中の要素の高さが100vhを超えていますのでそのままでは収まりませんのではみ出します。
はみ出した部分を隠したいのなら下記のように設定すればいいですが、それだとはみ出した部分を見ることができなくなります。

css

1.wrapper { 2 width: 100%; 3 height: 100vh; /* heightに修正 */ 4 overflow: hidden; /* 追加 はみ出した部分を隠す */ 5 display: flex; 6 flex-direction: column; 7 background-color: lightsalmon; 8}

投稿2023/04/13 19:34

編集2023/04/13 23:44
hatena19

総合スコア33505

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yuyuyu88

2023/04/14 02:23

min-height:100vhは要素の高さに応じて自動で高さが伸びていくものだと思っていました。 そういう指定方法はないのでしょうか?
hatena19

2023/04/14 02:37

> min-height:100vhは要素の高さに応じて自動で高さが伸びていくもの その認識であってますよ。私の回答もそのような意味になってますが。 提示のコードでも要素の高さに応じて自動で高さが伸びています。 このコードで希望(想定)と違うのは具体的にどのようなことでしょうか。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.54%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。