前提
サーバーでサイトをあげた後、googlemapのみが高さを維持できずに小さくなってしまった。
実現したいこと
コピーライトの位置まで高さを出したい。
レスポンシブ対応でiframeタグ内のwidthとheight指定を削除してます。レスポンシブ対応をしつつ、高さを維持したい。
該当のソースコード
HTML
<!-- フッター ---------------> <footer> <div class="imformation"> <div class="imformation-sub"> <h1><img class="footer-logo " src="img/group1.png" alt="石井総合内科クリニック"></h1> <div class="adress"> <a class="footer-adress-number">〒000-0000</a> <a class="footer-adress-wrapper">山形県山形市七日町xxxxxx</a> </div><!-- ./adress --> <div class="nav"> <div class="nav-tel-header"> <a class="tel-number footer-tel-number" href="tel:00000000000">000-0000-0000</a> </div><!-- /.nav-tel-header --> </div><!-- /.nav --> <table> <tr> <td class="open first">診療時間</td> <td class="week first"><span>月・火</span></td> <td class="time-am first">午前 8:30~12:30</td> <td class="time-pm first">午後 15:00~18:30</td> </tr> <tr> <td class="open second"></td> <td class="week second"><span>木・金</span></td> <td class="time-am second">午前 8:30~12:30</td> <td class="time-pm second">午後 15:30~19:00</td> </tr> <tr> <td class="open second"></td> <td class="week second"><span>土・水</span></td> <td class="time-am second">午前 8:30~12:30</td> <td class="time-pm second">午後 14:00~18:00</td> </tr> <tr> <td class="close">休診日</td> <td class="holiday">日曜・祝日</td> </tr> </table> </div><!-- ./imformation-sub --> <div class="footer-wrapper"> <p>©ISHII SOUGOU NAIKA CLINIC, All Rights Reserved.</p> </div> </div> <!-- ./imformation --> <div id="map"> <div class="location-map"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6266.375023550152!2d140.33714384810753!3d38.251956918302426!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5f8bb603d4436fcd%3A0xa50e3433978fc243!2z44CSOTkwLTAwNDIg5bGx5b2i55yM5bGx5b2i5biC5LiD5pel55S6!5e0!3m2!1sja!2sjp!4v1664540309856!5m2!1sja!2sjp" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> </div><!-- ./ location-map--> </div><!-- ./map--> </footer>
css
@charset "UTF-8"; /* 共通部分 ----------------------------------*/html { font-size: 100%;} body { font-family: 'Noto Sans JP', sans-serif; line-height: 24px; color: #444444;} a { text-decoration: none;} img { max-width: 100%;}.nav-tel-header { position: relative;}.nav .tel-number:before { content:""; display: block; width: 24.36px; height: 24.57px; background: url(img/受話器の線画アイコン.svg) no-repeat; background-size: contain; position: absolute; top: 50%; transform: translate(0,-50%); line-height: 24px;} .tel-number { color: #21A937; list-style-type: none; font-size: 24px; font-weight: bold; line-height: 24.57px; } /* フッター ----------------------------------*/footer { max-width: 1180px; display: flex; justify-content: center; margin: 0 auto; gap: 34px; } .imformation { width: 50%; order: 2; padding-top: 196px;} .adress { font-size: 16px; margin-top: 25px; margin-bottom: 25px; font-style: normal; font-family: Noto Sans JP; line-height: 38px; font-weight: normal;}.footer-adress-number { margin-right: 16px;}.nav .footer-tel-number:before { left: 0;}.footer-tel-number { padding-left: 29.5px;} #map { width: 50%; height: auto; order: 1; padding-top: 196px; padding-bottom: 163px;} iframe { width: 100%; aspect-ratio: 12/9; } .footer-wrapper { text-align: right; font-size: 11px; margin-bottom: 173px; line-height: 38px; } /* 診療時間 */table { font-size: 14px; text-align: left; margin-top: 28.5px; border-top: 2px solid #E7E7E7; border-bottom: 2px solid #E7E7E7; font-weight: normal;} .week { margin-right: auto; margin-left: auto; width: fit-content; } .week span { background: linear-gradient(transparent 70%, #99E5A5 80%);} .open { padding-right: 57px; } .close { padding-right: 57px;} .close,.holiday { padding-bottom: 23.5px; padding-top: 31px;} .first { padding-top: 21.5px;} .second { padding-top: 13px;} .time-pm { padding-left: 17px; padding-right: 128px;} .open,.close { position: relative;} .open::after,.close::after { content: ""; position: absolute; right: 20px; border-right: 2px solid #E7E7E7;} .open::after { top: 5px; bottom: -8px;} .close::after { top: 29px; bottom: 15px;}.open.first::after { top: 20px; } /* モバイル版 ----------------------------------*/ @media (max-width: 1140px) { /* フッター*/ table { font-size: 14px; } .time-pm { padding-right: 5px; } .footer-wrapper { padding-right: 40px; } } @media (max-width: 860px) { /* フッター*/ footer { display: flex; flex-direction: column; justify-content: center; text-align: center; } #map { margin-top: 23px; margin-bottom: 0; width: 90%; height: 100%; padding-top: 0; padding-bottom: 0; margin: 0 auto; order: 2; } .imformation { display: contents; } .imformation-sub { order: 1; } .footer-logo { padding-top: 50px; margin-bottom: 20px; } .nav-tel-header { margin: 10px 0; display: inline; } table { margin: 0 auto; margin-top: 15px; } table { font-size: 12px; } .time-pm { padding-left: 17px; padding-right: 0; } .footer-wrapper { order: 3; margin-bottom: 23px; padding-right: 0px; text-align: center; } .open, .close { padding-right: 30px; }}
試したこと
ネットで調べてみたが、レスポンシブを対応させながらの
高さを維持する方法がわからなかった。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
0 コメント