概要
付属画像のようにフッターの下に余白が出来てしまいます。
スクロールして下まで進まないと余白があるかどうかみることが出来ないかもしれません。
何故かたまにですが、数回に1回ですが、同じページを開くと、フッターの下に余白が出来ない時もあります。
付属画像
実際のサイトのURL
https://rensyuu12.tokyo/PHPMailer/footer.html
試したこと。
50reset.cssのbodyとfooterにmargin0を追加してみても変化がありません。
また、footerを固定して、高さをページ全体に指定しています。
先に進めず困っています。原因は何でしょうか?
回答よろしくお願いいたします。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta content="text/html; charset=utf-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <link rel="stylesheet" href="50reset.css"><!--リセットCSS--> 7<link rel="stylesheet" href="fff.css"><!--フッター等のCSS--> 8 9<title></title> 10 <style> 11</style> 12</head> 13<body> 14<div class="wrapper"> 15 16<footer> 17 <small><a href="" class="sss10"><span>プライバシーポリシー </span></a> <a class="sss11"><span>Copyright © 2021 Inc.All Right Reserved.</span></a></small> 18</footer> 19 20</div> 21<!--overflow:hidden div--> 22</body> 23</html>
◎フッター等のCSS
fff
css
1* 画面幅(2000px以下の時までの適応)指定 */ 2@media screen and (max-width: 2000px){ 3 4 /* fotterタグの手前までdiv */ 5 6.wrapper{ 7 overflow: hidden; 8 } 9 10 11 12/* footerのスタイルと英語の文字のスタイルなど */ 13footer { 14 15 padding: 2px; 16 background-color: rgb(7, 206, 0); 17 color: white; 18 font-size: 12px; 19 20 width:100%; 21 height: 14px;/* wrpperのpadding-bottom:と同じ値 */ 22 23 24 25 text-align: center; 26 bottom: 0; /*下に固定*/ 27 position: absolute;/*←絶対位置*/ 28 } 29 30 31 32 /* footerの下の白い余白を無くすための処置 &1とする */ 33 /* &1 */ 34 .wrapper{ 35 min-height: 100%;/* ページ全体の高さを指定 */ 36 position: relative;/*←相対位置*/ 37 padding-bottom: 14px;/*←footerの高さ*/ 38 box-sizing: border-box;/*←全て含めてmin-height:100vhに*/ 39 } 40 41} 42
リセットCSS
◎50resetcss
css
1html, body { 2 height: 100%; 3} 4 5 6/*フッターのみpadding0; margin:0;を適応しない */ 7footer{ 8 9 10 11 margin:0; 12 padding:0; 13 border:0; 14 outline:0; 15 font-size:100%; 16 vertical-align:baseline; 17 18 19} 20 21body { 22 line-height:1; 23 margin: 0; 24}

回答2件
あなたの回答
tips
プレビュー