出於某種原因，我的頁腳不是非常移動友好

Question

我的網站的90％是移動友好的（一切都調整大小等），但由於某種原因，我的頁腳基本上完全切斷了移動。

我有它的方式設置currently正是我想如何設置。這就是它看起來像在移動：

$(function() { 
 
    $('.navigation .nav-toggle').on('click', function() { 
 
    $('.wrapper').toggleClass('open'); 
 
    }); 
 
}); 
 

 
$(function() { 
 
    $('.navigation ul li .home a:not(.navigation .nav-toggle)').on('click', function() { 
 
    $('.navigation ul li').removeClass('active'); 
 
    $(this).addClass('active'); 
 
    }); 
 
}); 
 

 
$(function() { 
 
    $('.navigation ul li.home a').addClass('active'); 
 
});

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: sans-serif; 
 
    align-items: center; 
 
    background: url("../images/bg.png") no-repeat; 
 
    background-size: cover; 
 
} 
 

 
html { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    min-height: 100%; 
 
} 
 

 
.navigation { 
 
    width: 100%; 
 
} 
 

 
.navigation ul { 
 
    overflow: hidden; 
 
    color: white; 
 
    padding: 0; 
 
    text-align: right; 
 
    margin: 0; 
 
    margin-right: 15px; 
 
} 
 

 
.navigation ul li { 
 
    padding: 17px 12px; 
 
    display: inline-block; 
 
} 
 

 
.navigation ul li a { 
 
    -webkit-transition: color 0.4s; 
 
    -moz-transition: color 0.4s; 
 
    -ms-transition: color 0.4s; 
 
    -o-transition: color 0.4s; 
 
    transition: color 0.4s; 
 
} 
 

 
.navigation ul li a:hover { 
 
    color: #00D5C2; 
 
} 
 

 
.navigation ul li a { 
 
    text-decoration: none; 
 
    color: white; 
 
    font-size: 115%; 
 
    display: block; 
 
} 
 

 
.side-nav { 
 
    position: fixed; 
 
    width: 220px; 
 
    height: 150vh; 
 
    background-color: #2D2D2D; 
 
    transform: translateX(-100%); 
 
    transition: transform 0.4s ease; 
 
} 
 

 
.side-nav ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    z-index: 0; 
 
} 
 

 
.side-nav ul li { 
 
    border-bottom: 1px solid gray; 
 
    border-width: 100%; 
 
    margin: 5px; 
 
} 
 

 
.outerwrapper { 
 
    height: 100vh; 
 
    display: block; 
 
    overflow-x: hidden; 
 
    position: relative; 
 
} 
 

 
.wrapper { 
 
    height: 100vh; 
 
    display: block; 
 
    transform: translateX(-100); 
 
    transition: transform 0.6s ease; 
 
    min-height: 100%; 
 
    position: relative; 
 
} 
 

 
.wrapper.open { 
 
    transform: translateX(220px); 
 
    background-color: rgba(84, 84, 84, 0.6); 
 
} 
 

 
.side-nav ul li a { 
 
    padding: 10px; 
 
    display: block; 
 
    color: gray; 
 
    text-decoration: none; 
 
} 
 

 
.side-nav ul li a:hover { 
 
    color: white; 
 
    text-decoration: none; 
 
} 
 

 
.side-nav.open { 
 
    transform: translateX(0); 
 
} 
 

 
.navigation .nav-toggle { 
 
    display: none; 
 
    float: left; 
 
    padding: 20px 30px 20px 30px; 
 
    cursor: pointer; 
 
} 
 

 
.footer { 
 
    margin-top: -5em; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-color: rgba(237, 237, 237, 0.2); 
 
    position: relative; 
 
    height: 70px; 
 
    z-index: -1; 
 
} 
 

 
.footerinfo { 
 
    margin-top: 20px; 
 
} 
 

 
.footerinfo p { 
 
    vertical-align: middle; 
 
    padding: 25px; 
 
    color: white; 
 
    text-align: center; 
 
    ; 
 
} 
 

 
.navigation ul li a.active { 
 
    color: #00F0DB; 
 
} 
 

 
#logo img { 
 
    max-width: 100%; 
 
    height: auto; 
 
    width: auto\9; 
 
    display: block; 
 
    margin: 0 auto; 
 
} 
 

 
.footerlogo img { 
 
    margin-bottom: -65px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
.about-btn { 
 
    -webkit-transition: color 0.4s; 
 
    -moz-transition: color 0.4s; 
 
    -ms-transition: color 0.4s; 
 
    -o-transition: color 0.4s; 
 
    transition: color 0.4s; 
 
    -webkit-transition: border-color 0.4s; 
 
    -moz-transition: border-color 0.4s; 
 
    -ms-transition: border-color 0.4s; 
 
    -o-transition: border-color 0.4s; 
 
    transition: border-color 0.4s; 
 
    font-size: 135%; 
 
    text-transform: uppercase; 
 
    text-decoration: none; 
 
    vertical-align: middle; 
 
    width: auto; 
 
    display: block; 
 
} 
 

 
.about-btn a { 
 
    -webkit-transition: color 0.4s; 
 
    -moz-transition: color 0.4s; 
 
    -ms-transition: color 0.4s; 
 
    -o-transition: color 0.4s; 
 
    transition: color 0.4s; 
 
    -webkit-transition: border-color 0.4s; 
 
    -moz-transition: border-color 0.4s; 
 
    -ms-transition: border-color 0.4s; 
 
    -o-transition: border-color 0.4s; 
 
    transition: border-color 0.4s; 
 
    color: #3A9DA4; 
 
    border-radius: 9px; 
 
    padding: 10px 20px; 
 
    border: solid #3A9DA4 3px; 
 
    text-decoration: none; 
 
    font-size: 20px; 
 
    transition: all 0, 4s; 
 
} 
 

 
.about-btn li { 
 
    list-style-type: none; 
 
    margin: auto; 
 
    align-items: center; 
 
    width: 50%; 
 
    text-align: center; 
 
} 
 

 
.about-btn a:hover { 
 
    border-color: white; 
 
    color: white; 
 
    text-decoration: none; 
 
    font-size: 20px; 
 
    transition: scale(1, 1) 
 
} 
 

 
@media screen and (max-width: 700px) { 
 
    .navigation ul li { 
 
    display: none; 
 
    } 
 
    .navigation .nav-toggle { 
 
    display: inline; 
 
    } 
 
    .about-btn a { 
 
    font-size: 15px; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="outerwrapper"> 
 
    <div class="wrapper"> 
 
    <div class="side-nav"> 
 
     <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">About</a></li> 
 
     <li><a href="#">Repo</a></li> 
 
     <li><a href="#">Code</a></li> 
 
     <li class="pluginrequests"><a href="request">Request Plugin</a></li> 
 
     </ul> 
 
    </div> 
 
    <div class="navigation"> 
 
     <ul> 
 
     <li class="nav-toggle">&#9776</li> 
 
     <li class="home"><a href="#">Home</a></li> 
 
     <li class="repo"><a href="#">Repo</a></li> 
 
     <li class="pluginrequests"><a href="request">Request Plugin</a></li> 
 
     </ul> 
 
    </div> 
 
    <div id="logo"> 
 
     <img src="images/logo.png" alt="Squallz Logo"> 
 
    </div> 
 
    <div class="about-btn"> 
 
     <li><a href="about">About Me</a></li> 
 
    </div> 
 
    </div> 
 
    <div class="footer"> 
 
    <div class="footerinfo"> 
 
     <p>Copyright Squallz 2017. Personal website by <b>Squallz</b></p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

嘗試在你的CSS添加此，再次查看您mobileL

.outerwrapper {
高度：100％ ！重要;
}

Answer 2

您需要頁腳類的CSS設置爲：

z-index: 999 !important; 
 
position: fixed !important; 
 
bottom:0 !important; 
 
background-color: rgba(237, 237, 237, 0.2);