html - 调整窗口大小时页脚内容被推送

Question

我有一些我不太明白如何解决的问题。我的页面底部有一个粘性页脚。

这是我的 CSS:

footer {
    position: absolute;
    margin-top:50px;
    left: 0;
    bottom: 0;
    height: 102px;
    width: 100%;
    background-image: url('images/footer.png');
    font-size: 15px;
}

.left{
    text-align:left;
    float:left;
    margin-left: 100px;
    margin-top: 10px;
    font-family: Comfortaa-Light;
}
.center{
    text-align:left;
    float:left;
    margin-left: 200px;
    margin-top: 10px;
    font-family: Comfortaa-Light;
}
.right{
    border-radius: 10px;
    border-style: solid;
    border-width: 2px;
    padding: 15px;
    border-color: black;
    background-image: url('images/main-back.png');
    width: 250px;
    float:right;
    text-align:left;
    margin-right: 100px;
    margin-top: 13px;
    font-family: Comfortaa-light;
}

我有页脚本身，加上一些列。现在，这是我的 HTML:

         <footer>
        <p class="left"><span class="fb-icon"><a class="footer" href="testimonials.html">Facebook</a></span><br /><span class="craigs-icon"><a class="footer" href="experience.html">Craigslist</a></span></p>
        <p class="right"><span class="phone-icon">Phone:</span> <b>(541) 420 3375</b><br/><span class="mail-icon">E-mail:</span> <a href="mailto:CompLife@gmx.com">CompLife@gmx.com</a></p>
        <p class="center"><span class="testimonial-icon"><a class="footer" href="testimonials.html">Testimonials</a></span><br /><span class="chatbox-icon"><a class="footer" href="contact.html">Chatbox</a></span></p>
     </footer>

现在，每当我调整窗口大小时，页脚内容开始被推到左侧或右侧，具体取决于我调整窗口大小时的方式。我不希望发生这种情况，我希望调整窗口大小并将页脚留在原处。有人可以帮我吗？

Answer 1

通过在页脚上使用规则 width: 100%; 使其随窗口调整大小，将宽度更改为固定值可以解决问题，但它会使页脚保持不变即使在没有必要的情况下也看不见，所以我建议保留 width: 100%; 并添加一个 min-width css 规则，其中最小宽度以像素为单位不会使中心 p 向下移动。