Question

我正在尝试配置我的CSS布局的这个底部部分，但似乎无法弄清楚如何做到这一点。

body {
    background: #f9f9f9;
    font-family: 'Droid Sans', sans-serif;
    color: #777;
    font-size:13px;
    line-height:25px;
}


#footer {
    background: #1b1b1b url("../images2/footer.jpg") repeat top;
    padding:50px 0;
    width:100%;
    color: #867f72;
}

代码：

<!-- START #footer -->
    <div id="footer">
        vxsvsd
    </div>
    <!-- END #footer -->

实时预览：http://www.krissales.me/user/tyler/whmcs/index.php

向下滚动，你们碰巧知道它为什么不坐在屏幕的底部？相反，它显示了巨大的差距。我没有正确对齐吗？

谢谢！

Answer 1

如果您想要没有任何差距，请将其添加到您的页脚样式：

position: fixed;
bottom: 0px;

请注意：这将在底部显示页脚始终，这意味着它可以，并且很可能会与您的主要内容重叠。我建议为您的主要内容添加min-height以防止这种情况发生。或者只是放弃并保持原样。

Answer 2

如果您有一个固定的页脚高度，您可以使用以下方法：http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

简而言之：为页脚设置'positioning：absolute'和'bottom：0'，然后将主元素的底部填充设置为页脚的高度。还需要一个包含'min-height：100％'和'positioning：relative'的包装元素。

底部宽度未调整

2 个答案: