如何让页脚粘到底部然后调整大小？

-1

如何在底部调整页脚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="#">[email protected]</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="#">[email protected]</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="#">[email protected]</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="#">[email protected]</a></p> 
        </div> 
        <div class="col-md-2 right-col"> 
         <h2><a class="info" href="#">[email protected]</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：固定

来源

2016-03-19 Paulius Rimgaila

适用'位置：absolute'和'底部：0' –

当我添加{位置：绝对和底部：0}我得到这个HTTP：// postimg。 org/image/4zv1wbdk9 /并调整大小http://s10.postimg.org/r2zhzgg1l/resized.jpg –

你可以创建一个完整的代码jsfiddle吗？ –

使用位置..

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

来源

2016-03-19 10:25:21

谢谢！但是，当我申请职位：固定我得到这个http://s10.postimg.org/r2zhzgg1l/resized.jpg。我与我分享我的代码：https://jsfiddle.net/6116unyr/也许它是hepls。 –

谢谢。但是，当我添加此代码你改变我得到这个问题http://s29.postimg.org/3nukjrldj/Be_pavadinimo.jpg –

如何让页脚粘到底部然后调整大小？

回答

相关问题