如何使頁腳成爲頁面底部

您好，我爲我的網站製作了頁腳，我認爲它適用於我的所有頁面，但是當我嘗試將其添加到第二頁時，它會留下間隙在頁面底部！如何使頁腳成爲頁面底部

我的索引頁上我沒有這個問題有人可以幫忙！

<div class="footer"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-sm-6"> 
       <h4>Links</h4> 
       <li><a href="index.html">Home</a></li> 
       <li><a href="courses.html">Courses</a></li> 
       <li><a href="sign-up.html">Sign Up</a></li> 
       <li><a href="log-in.html">Log In</a></li> 
       <li><a href="about.html">About</a></li> 
      </div> 

      <div class="col-sm-6"> 
       <h4>Social Media</h4> 
       <li><a href="#">Facebook</a></li> 
       <li><a href="#">Twitter</a></li> 
       <li><a href="#">Youtube</a></li> 
       <li><a href="#">Instagram</a></li> 
      </div> 
     </div> 
    </div> 
</div>

CSS

.footer { 
    height: 200px; 
    border-top: 1px solid #d8d8d8; 
} 
.footer li { 
    text-decoration: none; 
    font-weight: bold; 
    list-style-type: none; 
    padding: 0; 
    margin-left: 0; 
    margin-top: 2px; 
} 
.footer h4 { 
    font-weight: bold; 
    margin-top: 30px; 
}

我怎麼沒在底部

<div class="more-info"> 
    <div class="container"> 
      <a href="#">Privacy Policy</a> 
      <a>|</a> 
      <a href="#">Terms</a> 
      <ul class="pull-right"> 
      <a></a> 
     </div> 
    </div>

CSS

.learn-more h3 { 
font-weight: bold; 
font-size: 23px 
} 
.learn-more a { 
color: #00b0ff; 
text-decoration: underline; 
font-size: 15px; 
} 
.learn-more { 
height: 480px; 
}

來源

2016-02-07 Ronnie Gurr

這將幫助，如果你提供相關的CSS。 – Yass

聽起來像你需要一個「粘腳」...嘗試谷歌搜索。 –

@ Paulie_D的建議會讓你得到你想要的。 – Yass

文本試試這個

.footer { 
    position: fixed; 
    bottom: 0; 
}

來源

2016-02-07 12:09:14 HebleV

試過這似乎只是把它搞亂了哈哈 –

你可以參考這個做一個stickey頁腳然後http://ryanfait.com/sticky-footer/ – HebleV

我不太確定，這是全部，你想要什麼。請檢查jsfiddle。

請看看下面的代碼：

HTML

<div class="footer"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-xs-6"> 
      <h4>Links</h4> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="courses.html">Courses</a></li> 
      <li><a href="sign-up.html">Sign Up</a></li> 
      <li><a href="log-in.html">Log In</a></li> 
      <li><a href="about.html">About</a></li> 
     </div> 

     <div class="col-xs-6"> 
      <h4>Social Media</h4> 
      <li><a href="#">Facebook</a></li> 
      <li><a href="#">Twitter</a></li> 
      <li><a href="#">Youtube</a></li> 
      <li><a href="#">Instagram</a></li> 
     </div> 
    </div> 
    <div class="more-info">  
     <a href="#">Privacy Policy</a> 
     <a>|</a> 
     <a href="#">Terms</a> 
     <ul class="pull-right"> 
     <a></a> 
     </ul> 
    </div> 
    </div>    
</div>

CSS

.footer { 
height: 200px; 
border-top: 1px solid #d8d8d8; 
position: absolute; 
bottom: 0; 
width: 100%; 
} 
.footer li { 
text-decoration: none; 
font-weight: bold; 
list-style-type: none; 
padding: 0; 
margin-left: 0; 
margin-top: 2px; 
} 
.footer h4 { 
font-weight: bold; 
margin-top: 30px; 
} 
.learn-more h3 { 
font-weight: bold; 
font-size: 23px 
} 
.learn-more a { 
color: #00b0ff; 
text-decoration: underline; 
font-size: 15px; 
} 
.learn-more { 
height: 480px; 
}

來源

2016-02-07 15:43:44 Shashank

如何使頁腳成爲頁面底部

回答

相關問題