[update] : いい感じのfooter

diff --git a/buildmydist-2/commonhtml/footer.php b/buildmydist-2/commonhtml/footer.php
index a0ec763..268a7c9 100644 (file)
--- a/buildmydist-2/commonhtml/footer.php
+++ b/buildmydist-2/commonhtml/footer.php
@@ -1,9 +1,11 @@
+<div id="footerblank"></div>
+
 <footer>
     <p style="float: left; margin-left: 1%;">
         Copyright &copy; 2019 - 2021 Fascode Network All Rights Reserved.
     </p>
       
-    <p style="text-align: right; margin-right: 1%;">
+    <p id="counter">
         <!-- <script type="text/javascript" src="//ct2.shinobi.jp/sc/1744984"></script> -->
         <img src="//ct2.shinobi.jp/ll/1744984" alt="カウンター">
     </p>

diff --git a/buildmydist-2/commonhtml/head.php b/buildmydist-2/commonhtml/head.php
index 9b5fdb7..8714fbe 100644 (file)
--- a/buildmydist-2/commonhtml/head.php
+++ b/buildmydist-2/commonhtml/head.php
@@ -15,6 +15,7 @@
 <!-- ここからCSS定義 -->
 <link rel="stylesheet" href="/buildmydist-2/style/common.css">
 <link rel="stylesheet" href="/buildmydist-2/style/var.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modern-css-reset/dist/reset.min.css" />
 <link rel="stylesheet" href="/buildmydist-2/style/sp.css" media="screen and (max-width: 799px)">
 <link rel="stylesheet" href="/buildmydist-2/style/pc.css" media="screen and (min-width: 800px)">
 

diff --git a/buildmydist-2/script/footer.js b/buildmydist-2/script/footer.js
index e69de29..b00f85a 100644 (file)
--- a/buildmydist-2/script/footer.js
+++ b/buildmydist-2/script/footer.js
@@ -0,0 +1,9 @@
+function FooterBlank(){
+    $("#footerblank").css({
+        paddingBottom: $("footer").outerHeight() + "px",
+    });
+    console.log($("footer").outerHeight() + "px")
+}
+
+window.addEventListener("load", FooterBlank);
+window.addEventListener("resize", FooterBlank);

diff --git a/buildmydist-2/style/common.css b/buildmydist-2/style/common.css
index 5d0a58a..06ca533 100644 (file)
--- a/buildmydist-2/style/common.css
+++ b/buildmydist-2/style/common.css
@@ -1,7 +1,7 @@
 /* === ここからメニューバー === */
 header{
     /* 横幅を画面いっぱいにする */
-    width: 100vw;
+    width: 100%;
 
     /* 上下の空白 */
     padding-top: 0.5%;
@@ -14,12 +14,7 @@ header{
     color: var(--white-1);
 
     /* 高さ */
-    height: 5rem;
-}
-
-* { 
-    margin: 0px; 
-    padding: 0px; 
+    min-height: 5rem;
 }
 
 .bar-item-left, .bar-item-right, .bar-logo{
@@ -86,6 +81,7 @@ header{
 /* === ここから本文 === */
 main{
     padding: 1%;
+    margin-bottom: auto;
 }
 /* === ここまで本文 === */
 
@@ -94,7 +90,6 @@ main{
 /* === ここから全体 === */
 body{
     min-height: 100vh;
-    width: 100vw;
 }
 /* === ここまで全体 === */
 
@@ -104,9 +99,14 @@ body{
 footer{
     color: var(--white-1);
     background-color: var(--black-1);
-    width: 100vw;
+    width: 100%;
     padding-top: 0.3%;
     padding-bottom: 0.3%;
 
+    position: fixed;
+    bottom: 0;
+}
+#counter > img{
+    margin-left: auto;
 }
 /* === ここまでフッター === */