前提
HTML、CSSでとあるシステムの外観を作成しています。
下記コードの通り、ヘッダーとフッターをiframeで呼び出して、複数のページで流用しています。
login.htmlでは想定通りにヘッダーとフッターが表示がされているのですが、index.htmlではページの右側に大きく余白ができてしまいます。
色々原因を探ってみても解明せず、試しにindex.htmlのコードを全文、login.htmlにコピペしたところ余白が解消されました。
どうやら「login.html」というファイル名の場合のみ、余白が消えるようで、「login.html2」に名前を変更すると余白が発生してしまいます。
上記のような現象はどのような場合に起きるのでしょうか。
色々調べてみても、同じ現象が起きている方はいませんでしたので、こちらで質問させていただきます。
ご参考程度にコードを掲載いたします。
よろしくお願いいたします。
HTMLソースコード
login.html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <script> 7 (function(d) { 8 var config = { 9 kitId: 'lcm1nvy', 10 scriptTimeout: 3000, 11 async: true 12 }, 13 h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s) 14 })(document); 15 </script> 16 <link rel="stylesheet" href="css/reset.css"> 17 <link rel="stylesheet" href="css/style.css"> 18 <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> 19 <title>Document</title> 20</head> 21<body> 22 23/*ヘッダー*/ 24 <div class="header"> 25 <iframe src="header.html" width="100%" height="100%" scrolling="no" frameborder="0"></iframe> 26 </div> 27 28/*メディアコンテンツエリア*/ 29 <div class="log_box"> 30 <div class="shain_set"> 31 <p class="shain">社員番号<input type="text" name="number" class="inp_shain"></p> 32 </div> 33 <p class="hankaku">※半角で入力してください。</p> 34 <div class="shimei_set"> 35 <p class="shimei">氏名<input type="text" name="name" class="inp_name"></p> 36 </div> 37 <p class="no_space">※スペースなしで入力してください。</p> 38 <form action="index.html" method="get"> 39 <div class="log_btn"> 40 <input type="submit" value="ログイン" class="log_form"> 41 </div> 42 </form> 43 </div> 44 45/*フッター*/ 46 <div class="footer"> 47 <iframe src="footer.html" frameborder="0" style="border: none" width="100%" height="120px" scrolling='no' frameborder="0"></iframe> 48 </div> 49 50</body> 51</html>
CSSソースコード（ヘッダーとフッターのみ）
style.css
1* { 2 box-sizing: border-box; 3} 4/* ～～～～～～～～～～～～～～～～～～～～標準サイズ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～ */ 5@media screen and (max-width:1400px){ 6 .header{ 7 display: flex; 8 top: 0; 9 justify-content: space-between; 10 align-items: center; 11 margin-top: -14px; 12 height: 170px; 13 width: 1100px; 14 background-color: #ffffff; 15 } 16 17 body{ 18 font-family: "oshidashi-m-gothic", sans-serif 19 font-style: normal 20 color: #2a4642; 21 overflow-x: auto; 22 } 23 24 .footer{ 25 display: flex; 26 justify-content: space-between; 27 align-items: center; 28 position:relative; 29 margin-top: auto; 30 width: 1100px; 31 height: 150px; 32 background-color: #ffffff; 33 } 34 35 iframe { 36 margin: 0; 37 padding: 0; 38 overflow: hidden; 39 }
コードについて
reset.cssは必要最低限のものを設定しています。
ヘッダーとフッターはそれぞれ画像を4つほど組み合わせて作成していますが、各画像に設定しているcssは省略していますので、必要でしたら掲載いたします。
その他メディアコンテンツのcssも省略しています。（メディアコンテンツのhtmlとcssを消去した状態で試してみましたが問題は解消されなかったので、恐らく本課題の原因にはなっていないと踏んでいます。）
0 コメント