フッターを底につけてサイズを変更する方法は？

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; 
} 

、なぜuがとても長いコードを作っている....

#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*/ 
}