调整窗口大小时正在推送页脚内​​容

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向下移动。