Question

在页面底部，我收到一条消息，上面写着“就像你看到的一样？我们应该说话。”但由于某些原因，与其他任何页面不同，这个页面与页脚重叠。

CSS：

.message {
    margin: 150px 0;
    text-align: center;
}

HTML：

            <div class="message">
                <span class="first-part">Like what you see?</span>
                <span class="second-part"><a href="contact.html">We should talk.</a></span>
            </div>

            <div class="footer-wrapper">
                <div class="footer">
                    <p class="copyright">Copyright &copy; 2012 Christian Selig</p>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="#work" class="scroll">Work</a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </div>
            </div>

正如你所看到的，我以为我给了.message CSS 150px的顶部和底部边距，但它似乎没有在底部踢。我可以给它填充，但这似乎不是一个正确的解决方案，因为我不希望元素跨越那么多空间，我只是想让它推下其他东西。

潜在的理解：边缘将其从内容中推开，但必须有内容。因为它是页面上的最后一个元素，它没有什么可以推开的，所以填充是必要的吗？如果这是真的，有更好的方法吗？

Answer 1

Padding对我很有用：

.message {
    padding: 150px 0;
    text-align: center;
}

http://fiddle.jshell.net/3EYdq/2/show/

Answer 2

一切都有点破，因为你没有清除.personal-info上的浮动

您可以使用此clearfix

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

然后将其应用于<div class="personal-info cf">

此外，最好使用sticky footer代替绝对位置。正如yckart所说，填充也是一种很好的方法。

Answer 3

从position: absolute;移除div.footer-wrapper，然后调整div.message

上的边距

.footer-wrapper {
    background: -moz-linear-gradient(center top , #F7F7F7 0%, #D6D6D6 100%) repeat scroll 0 0 transparent;
    border-top: 1px solid #CCCCCC;
    bottom: 0;
    height: 16px;
    overflow: hidden;
    padding: 8px 0 5px;
    width: 100%;
}

你不需要.message上的填充，这里的错误就是绝对定位.footer-wrapper div而不需要（据我所见）？

编辑：正如另一个答案所述，清算有点乱。添加

.wrapper {
    padding-bottom: 1px;
}

如果你想要快速修复，

似乎会有所帮助，但适当的清理会更好。

另外，您可能需要在页面顶部添加doctype，例如：

<!doctype html>

当您的网站在IE中以怪异模式呈现时出现更多显示错误。

Answer 4

这是因为你的页脚绝对位于底部，放在那里发生的任何事情上。

只需在.message的底部添加类似50px的填充，如果在其下方留出额外空间。

.message {
    margin: 150px 0;
    padding-bottom: 50px;
    text-align: center;
}

为什么我的页脚与页面底部的内容重叠？

4 个答案: