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

你可以这样做......

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

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

1 个答案: