頁腳不粘在頁面底部（隱藏內容）

所以我使用Weebly作爲我正在使用的網站的CMS，並且使用自定義頁腳時遇到了一些問題。基本上在這個頁面上： http://www.axelitepro.com/how-does-it-work.html 頁腳不粘在頁面底部（隱藏內容）

如果你不在大屏幕上並且頁面高度很短，它似乎會隱藏內容。我正在使用position:absolute和bottom:0，因爲您可以看到是否檢查元素。

如果有人可以對可能發生的事情有所瞭解，那麼將非常感激。

感謝

完整的代碼是在這裏：

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/> 
</head> 

<body class='no-header-page wsite-theme-light'> 
    <input type="checkbox" id="nav-trigger" class="nav-trigger"> 
    <div class="wrapper"> 

     <div id="header"> 
      <div class="container"> 
       <div id="nav-handle"> 
        <label for="nav-trigger" class="hamburger"> 
         <span class="mobile"></span> 
        </label> 
        <div class="wsite-nav-cart-wrapper"></div> 
       </div> 
       <div id="logo">{logo}</div> 
       <div id="search">{search}</div> 
      </div> 
     </div> 

     <div class="page-sidebar"> 
      <div id="navhidden" class="nav">{menu}</div> 
      <div id="nav" class="nav">{menu}</div> 
     </div> 


     <div class="page-content" style="background-color: #1E1E1E !important;"> 

      <div id="main" style="background-color: #1E1E1E !important; padding-top: 1.5em !important;"><div class="container">{content}</div></div> 
      <div id="footer" style="visibility: none;">{footer}</div> 



      <!-- Custom --> 

       <!-- Left hand side content (page links) --> 
       <div class="custom-footer"> 
       <p id="left-content"> 
       <a href="http://www.axelitepro.com/faqs.html"> FAQ's&emsp;&emsp;|&emsp;&emsp; </a> 
       <a href="http://www.axelitepro.com/contact-us.html"> Contact Us&emsp;&emsp;|&emsp;&emsp; </a> 
       <a href="http://www.axelitepro.com/terms-of-use.html"> Terms of Use&emsp;&emsp;|&emsp;&emsp; </a> 
       <a href="http://www.axelitepro.com/privacy-policy.html"> Privacy </a> 
       </p> 

       <!-- Right hand side content (social links) --> 
       <i class="fa fa-facebook-official"></i><i class="fa fa-twitter-square"></i><i class="fa fa-youtube-play"></i> 
       </div> 

      <!-- Styling --> 
      <style> 
      .custom-footer { 
       position:absolute; 
       bottom:0px; 
       width: 100%; 
       height: 7%; 
       display: table; 

       /* Gradient */ 
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4c4c4c+0,000000+21,0e0e0e+79,4c4c4c+99 */ 
background: #4c4c4c; /* Old browsers */ 
/* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRjNGM0YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjIxJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc5JSIgc3RvcC1jb2xvcj0iIzBlMGUwZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iIzRjNGM0YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); 
background: -moz-linear-gradient(top, #4c4c4c 0%, #000000 21%, #0e0e0e 79%, #4c4c4c 99%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(21%,#000000), color-stop(79%,#0e0e0e), color-stop(99%,#4c4c4c)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #4c4c4c 0%,#000000 21%,#0e0e0e 79%,#4c4c4c 99%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #4c4c4c 0%,#000000 21%,#0e0e0e 79%,#4c4c4c 99%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #4c4c4c 0%,#000000 21%,#0e0e0e 79%,#4c4c4c 99%); /* IE10+ */ 
background: linear-gradient(to bottom, #4c4c4c 0%,#000000 21%,#0e0e0e 79%,#4c4c4c 99%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c4c4c', endColorstr='#4c4c4c',GradientType=0); /* IE6-8 */ 
      } 

      .custom-footer #left-content { 
       color: white !important; 
       display: table-cell; 
       vertical-align: middle; 
       padding-left: 5%; 
      } 

      .custom-footer i { 
       font-size: 20px; 
       color: white; 
       display: table-cell; 
       vertical-align: middle; 
      } 
      </style> 


     </div> 





     </div> 

    <!-- JavaScript --> 
    <script type="text/javascript" src="/files/theme/plugins.js"></script> 
    <script type="text/javascript" src="/files/theme/custom.js"></script> 
    <script type="text/javascript" src="/files/theme/mobile.js"></script> 
</body> 

</html>

來源

2015-09-26 dwinnbrown

使用'位置：fixed'爲您的頁腳。 – xxxmatko

@xxxmatko會不會意味着它始終處於底部？ – dwinnbrown

[Fix footer to page bottom]可能的重複（http://stackoverflow.com/questions/18915550/fix-footer-to-bottom-of-page） – Hkachhia

你應該position: fixed而不是position: absolute上.custom-footer

來源

2015-09-26 11:58:28

頁腳不粘在頁面底部（隱藏內容）

回答

相關問題