如何讓頁腳粘到底部然後調整大小？

Question

如何在底部調整頁腳45px並在調整頁面大小時保持相同的距離？我嘗試了很多東西，但是頁腳仍處於相同的位置。

它是如何看起來像現在：

如何應該是：

這是代碼段是我迄今所做的：

HTML

<section id="footer"> 
      <div class="container-fluid"> 
       <div class="row"> 
        <div class="col-md-2 left-col"> 
         <p><a class="contacts" href="#">CONTACTS</a></p> 
        </div> 
        <div class="col-md-2 contact-person"> 
         <h2>STUART LAWSON</h2> 
         <p>20 7409 8920</p> 
         <p>07870 555 930</p> 
         <p><a class="email" href="#">slawson@savills.com</a></p> 
        </div> 
        <div class="col-md-2 contact-person"> 
         <h2>JOSH LAMB</h2> 
         <p>020 7409 8891</p> 
         <p>07976 988 486</p> 
         <p><a class="email" href="#">jlamb@savills.com</a></p> 
        </div> 
        <div class="col-md-2 contact-person"> 
         <h2>SAM BOREHAM</h2> 
         <p>020 7710 7963</p> 
         <p>07917 635 465</p> 
         <p><a class="email" href="#">samb@gmreal.com</a></p> 
        </div> 
        <div class="col-md-2 contact-person"> 
         <h2>DAN ROBERTS</h2> 
         <p>020 7710 7963</p> 
         <p>07801 143 909</p> 
         <p><a class="email" href="#">danr@gmreal.com</a></p> 
        </div> 
        <div class="col-md-2 right-col"> 
         <h2><a class="info" href="#">info@theriverbuilding.com</a></h2> 
        </div> 
       </div> 
      </div> 
     </section> 

CSS

.col-md-2 { 

} 

#footer { 
    padding: 100px 45px 0; 
} 

.left-col { 
    padding: 110px; 
    margin-left: -75px; 
} 

.right-col { 
    padding: 86px; 
    position: absolute; 
    right: 76px; 
} 

#footer p { 
    font-family: 'GothamBook', sans-serif; 
    color: #ffffff; 
    font-size: 1.063em; /*13pt in psd*/ 
} 

#footer .email { 
    font-family: 'GothamBook', sans-serif; 
    color: #ffffff; 
    font-size: 1.063em; /*13pt in psd*/ 
} 

#footer .contacts { 
    font-size: 1.063em; /*13pt in psd*/ 
    font-family: 'GothamBook', sans-serif; 
    color: #ffffff; 
} 

#footer h2 { 
    font-family: 'GothamBook', sans-serif; 
    font-size: 1.063em; /*13pt in psd*/ 
    color: #ffffff; 
} 

#footer a:hover { 
    color: #0e6655; 
    outline: none; 
} 

#footer .info { 
    font-family: 'GothamMedium', sans-serif; 
    color: #ffffff; 
    font-size: 1.5em; /*15pt in psd*/ 
} 

.row { 
    width: 100%; 
    display: block; 
    position: relative; 
} 

.row .md-col-6 { 
    position: absolute; 
    top: 50px; 
    right: 45px; 
} 

#footer { 
    margin-left: 2%; 
} 

1：固定

Answer 1

使用位置..

#footer { 
    padding: 100px 45px 0; 
    position: fixed; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

和爲什麼ü正在你的代碼，這樣冗長....

#footer p { 
    font-family: 'GothamBook', sans-serif; 
    color: #ffffff; 
    font-size: 1.063em; /*13pt in psd*/ 
} 

#footer .email { 
    font-family: 'GothamBook', sans-serif; 
    color: #ffffff; 
    font-size: 1.063em; /*13pt in psd*/ 
} 

#footer .contacts { 
    font-size: 1.063em; /*13pt in psd*/ 
    font-family: 'GothamBook', sans-serif; 
    color: #ffffff; 
} 

#footer h2 { 
    font-family: 'GothamBook', sans-serif; 
    font-size: 1.063em; /*13pt in psd*/ 
    color: #ffffff; 
} 

#footer a:hover { 
    color: #0e6655; 
    outline: none; 
} 

#footer .info { 
    font-family: 'GothamMedium', sans-serif; 
    color: #ffffff; 
    font-size: 1.5em; /*15pt in psd*/ 
} 

u能做到這一點...

#footer p, #footer .email, #footer .contacts, #footer h2, #footer .info{ 
    font-family: 'GothamBook', sans-serif; 
    color: #ffffff; 
    font-size: 1.063em; /*13pt in psd*/ 
} 
#footer .info { 
    font-size: 1.5em; /*15pt in psd*/ 
}