前提・実現したいこと
表題の通り、 レスポンシブ時にfvにheaderを載せたい
ご教授いただけると幸いです。
発生している問題・エラーメッセージ
fvの上下に余白ができてしまいます
試したこと
fvのul li
overflow:hiddenを設定しているが、余白が出てしまう
position: relative,absoluteを使い、headerをfv内に表示させるよう試みるも、できない
該当のソースコード
※字数制限により、一部HTML,cssを書きました。
何卒宜しくお願い致します。
CSS
1.header { 2 position: fixed; 3 top: 0; 4 z-index: 999; 5 width: 100%; 6 max-height: 80px; 7 background-color: transparent; 8 display: -webkit-box; 9 display: -webkit-flex; 10 display: -ms-flexbox; 11 display: flex; 12 -webkit-box-pack: justify; 13 -webkit-justify-content: space-between; 14 -ms-flex-pack: justify; 15 justify-content: space-between; 16 padding: 10px 20px; 17} 18 19@media screen and (min-width: 600px) and (max-width: 1179px) { 20 .header { 21 position: fixed; 22 top: 0; 23 padding: 15px 20px; 24 } 25} 26 27@media screen and (max-width: 599px) { 28 .header { 29 position: fixed; 30 top: 0; 31 padding: 8px 10px; 32 max-height: 60px; 33 } 34} 35 36.header-inner { 37 max-width: 1880px; 38 width: 100%; 39 display: -webkit-box; 40 display: -webkit-flex; 41 display: -ms-flexbox; 42 display: flex; 43 -webkit-box-align: center; 44 -webkit-align-items: center; 45 -ms-flex-align: center; 46 align-items: center; 47 margin: 0 auto; 48 box-sizing: border-box; 49 -webkit-box-sizing: border-box; 50} 51 52.header-left { 53 display: -webkit-box; 54 display: -webkit-flex; 55 display: -ms-flexbox; 56 display: flex; 57 -webkit-box-pack: left; 58 -webkit-justify-content: left; 59 -ms-flex-pack: left; 60 justify-content: left; 61 -webkit-box-align: center; 62 -webkit-align-items: center; 63 -ms-flex-align: center; 64 align-items: center; 65} 66 67.header-left h1 { 68 display: block; 69} 70 71.header-left h1 .logo img { 72 display: block; 73 width: 130px; 74 height: 130px; 75 margin: 20px 120px 20px 20px; 76} 77 78.header-left .nav { 79 display: -webkit-box; 80 display: -webkit-flex; 81 display: -ms-flexbox; 82 display: flex; 83 -webkit-box-pack: justify; 84 -webkit-justify-content: space-between; 85 -ms-flex-pack: justify; 86 justify-content: space-between; 87 -webkit-box-align: center; 88 -webkit-align-items: center; 89 -ms-flex-align: center; 90 align-items: center; 91 margin-left: 120px; 92 /* @include tb { 93 display: none; 94 } */ 95 /* @include sp{ 96 right: -75%; 97 } */ 98} 99 100@media screen and (min-width: 600px) and (max-width: 1179px) { 101 .header-left .nav { 102 top: 80px; 103 position: fixed; 104 top: 150px; 105 right: 0; 106 z-index: 10; 107 overflow: hidden; 108 width: 16.25rem; 109 background-color: #000; 110 width: 50%; 111 height: 60vh; 112 -webkit-transform: translate(550px); 113 transform: translate(550px); 114 -webkit-transition: .5s; 115 transition: .5s; 116 } 117} 118 119@media screen and (max-width: 599px) { 120 .header-left .nav { 121 top: 60px; 122 position: fixed; 123 z-index: 2; 124 overflow: hidden; 125 width: 16.25rem; 126 background-color: rgba(0, 0, 0, 0.9); 127 width: 75%; 128 -webkit-transition: margin-left .5s; 129 transition: margin-left .5s; 130 } 131} 132 133.header-left .nav .header-list { 134 display: -webkit-box; 135 display: -webkit-flex; 136 display: -ms-flexbox; 137 display: flex; 138 -webkit-box-align: center; 139 -webkit-align-items: center; 140 -ms-flex-align: center; 141 align-items: center; 142 padding-top: 20px; 143 padding-bottom: 20px; 144} 145 146.header-left .nav .header-list .header-item { 147 color: #fff; 148} 149 150@media screen and (max-width: 599px) { 151 .header-left .nav .header-list .header-item { 152 padding: 20px; 153 font-size: 2rem; 154 } 155} 156 157.header-left .nav .header-list .header-item + .header-item { 158 padding-left: 30px; 159} 160 161.header-left .nav .header-list .header-item > a { 162 color: #fff; 163 display: inline-block; 164 -webkit-transition: .3s; 165 transition: .3s; 166 /* 0.3秒で拡大までの時間 */ 167} 168 169.header-left .drawer-nav_active { 170 -webkit-transform: translateZ(0); 171 transform: translateZ(0); 172} 173 174.header-right { 175 margin-left: auto; 176} 177 178@media screen and (max-width: 599px) { 179 .header-right { 180 margin-left: 20px; 181 } 182} 183 184.header-right .header-link { 185 /* height: calc(54/80*100%); 186 background-color: $link-color; 187 border-radius: 3px; 188 padding: 15px 35px; 189 display: flex; 190 justify-content: flex-end; 191 align-items: center; */ 192} 193 194@media screen and (min-width: 600px) and (max-width: 1179px) { 195 .header-right .header-link { 196 margin-left: auto; 197 } 198} 199 200.header-right .header-link .calender-link { 201 display: block; 202 background-color: #978F10; 203 text-decoration: none; 204 font-weight: bold; 205 -webkit-box-align: center; 206 -webkit-align-items: center; 207 -ms-flex-align: center; 208 align-items: center; 209 text-align: center; 210 color: #fff; 211 padding: 10px 37px; 212 font-size: 1.6rem; 213 -webkit-transition: .3s; 214 transition: .3s; 215} 216 217@media screen and (min-width: 600px) and (max-width: 1179px) { 218 .header-right .header-link .calender-link { 219 margin-right: 100px; 220 } 221} 222 223@media screen and (max-width: 599px) { 224 .header-right .header-link .calender-link { 225 padding: 8px 16px; 226 font-size: 1.4rem; 227 } 228} 229 230.header-right .header-link .calender-link::before { 231 content: ""; 232 display: inline-block; 233 margin: -3px 5px 0 0; 234 background: url(../../img/calender.png) no-repeat; 235 background-size: contain; 236 vertical-align: middle; 237 width: 22px; 238 height: 22px; 239} 240 241.header-right .header-link .calender-link:hover { 242 background-color: #000; 243} 244 245/* .nav-wrapper{ 246 height: 100%; 247 overflow-x: hidden; 248 position: relative; 249} */ 250.overlay { 251 content: ""; 252 display: block; 253 width: 0; 254 height: 0; 255 background-color: rgba(0, 0, 0, 0.5); 256 position: absolute; 257 top: 0; 258 left: 0; 259 z-index: 2; 260 opacity: 0; 261 -webkit-transition: opacity .5s; 262 transition: opacity .5s; 263} 264 265.overlay._open { 266 width: 100%; 267 height: 100%; 268 opacity: 1; 269} 270 271.modal { 272 display: none; 273 height: 100%; 274 position: fixed; 275 top: 0; 276 left: 0; 277 width: 100%; 278 z-index: 3; 279} 280 281.js-modal { 282 /* display: block; 283 width: calc(550 /1920*100%); 284 height: calc(600/1080*100%); 285 background-color: #fff; 286 position: absolute; 287 top: 50%; 288 left: 50%; 289 margin-right: 20px; 290 border: 1px solid #707070; 291 transform: translate(-50%,-50%); 292 z-index: 100; */ 293} 294 295.js-modal .modal__bg { 296 background: rgba(0, 0, 0, 0.6); 297 height: 100%; 298 position: absolute; 299 width: 100%; 300} 301 302.js-modal .js-modal-content { 303 background: #fff; 304 padding: 40px; 305 position: absolute; 306 top: 50%; 307 left: 50%; 308 -webkit-transform: translate(-50%, -50%); 309 transform: translate(-50%, -50%); 310 width: 60%; 311 position: relative; 312} 313 314@media screen and (max-width: 599px) { 315 .js-modal .js-modal-content { 316 width: 95%; 317 padding: 20px; 318 } 319} 320 321@media screen and (min-width: 1180px) { 322 .js-modal .js-modal-content { 323 width: 28%; 324 min-width: 550px; 325 padding: 20px 60px 90px 60px; 326 } 327} 328 329.form-inner .form_img { 330 width: 18px; 331 height: 18px; 332} 333 334.form-inner h2 { 335 font-size: 2rem; 336 text-align: center; 337 padding: 10px; 338} 339 340.form { 341 margin-top: 28px; 342} 343 344.form-list .form-item input { 345 border: 1px solid #E7E7E7; 346 padding: 0 10px; 347 width: 100%; 348 line-height: 1; 349 color: #797878; 350 height: 32px; 351 margin-top: 10px; 352} 353 354.form-list .form-item select { 355 border: 1px solid #E7E7E7; 356 padding: 0 10px; 357 width: 100%; 358 line-height: 1; 359 color: #797878; 360 height: 32px; 361 margin-top: 10px; 362} 363 364.form-close { 365 text-align: center; 366} 367 368.form-close > a { 369 display: inline-block; 370 width: 198px; 371 margin-top: 64px; 372 border: 1px solid #000; 373 text-align: center; 374 padding: 13px; 375 line-height: 1; 376 -webkit-transition: .3s; 377 transition: .3s; 378} 379 380.fv { 381 position: relative; 382 overflow: hidden; 383} 384 385.wrap { 386 padding: 16px; 387} 388 389#slide_wrap { 390 position: relative; 391 overflow: hidden; 392} 393 394#slide_wrap .slide_item { 395 opacity: 0; 396 -webkit-transform: scale(1); 397 transform: scale(1); 398 -webkit-transition: opacity 2s linear, -webkit-transform 7.5s linear; 399 transition: opacity 2s linear, -webkit-transform 7.5s linear; 400 transition: opacity 2s linear, transform 7.5s linear; 401 transition: opacity 2s linear, transform 7.5s linear, -webkit-transform 7.5s linear; 402 position: relative; 403} 404 405#slide_wrap .slide_item:not(:first-child) { 406 position: absolute; 407 top: 0; 408 left: 0; 409} 410 411@media screen and (min-width: 600px) and (max-width: 1179px) { 412 #slide_wrap .slide_item:not(:first-child) { 413 position: absolute; 414 top: 0; 415 left: 0; 416 } 417} 418 419#slide_wrap .slide_item.show { 420 opacity: 1; 421} 422 423#slide_wrap .slide_item.zoom { 424 -webkit-transform: scale(1.1); 425 transform: scale(1.1); 426} 427 428#slide_wrap .slide_item img { 429 display: block; 430} 431 432.fv-txt1 { 433 display: block; 434 position: absolute; 435 top: 26%; 436 left: 71%; 437 -webkit-writing-mode: vertical-rl; 438 -ms-writing-mode: tb-rl; 439 writing-mode: vertical-rl; 440 font-size: 3.4rem; 441 color: #fff; 442 padding-left: 51px; 443 line-height: 6rem; 444}
回答2件
あなたの回答
tips
プレビュー