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

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

html css

Html 为什么我的页脚与页面底部的内容重叠？,html,css,Html,Css,有关网站：在页面底部，我有一条信息，上面写着“就像你看到的一样？我们应该谈谈。”但由于某种原因，与其他任何页面不同，这一页的页脚重叠 CSS: HTML: <div class="message"> <span class="first-part">Like what you see?</span> <span class="second-part"><

有关网站：

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

CSS:

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>


就像你看到的那样？
版权与复制；2012年克里斯蒂安·塞利格

如您所见，我以为我给出了顶部和底部边距的

.message

CSS 150px，但它似乎没有从底部开始。我可以给它填充，但这似乎不是一个合适的解决方案，因为我不想让元素跨越那么多空间，我只想让它把其他东西往下推

潜在的理解：利润推动它远离内容，但那里必须有内容。因为它是页面上的最后一个元素，所以没有什么可以推开的，所以需要填充吗？如果这是真的，有更好的方法吗？

删除

位置：绝对div.footer-wrapper

中选择code>，然后调整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中以怪癖模式呈现时，会出现更多显示错误。
填充对我来说非常有用：
.message {
    padding: 150px 0;
    text-align: center;
}

这是因为您的页脚绝对位于底部，位于发生在那里的任何东西之上
只需在.message
的底部添加一个类似50px的填充，if就会在下面留出额外的空间
.message {
    margin: 150px 0;
    padding-bottom: 50px;
    text-align: center;
}

因为你没有清除你个人信息上的浮动，所以一切都有点不正常
您可以使用此clearfix
.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

然后将其应用于

此外，最好使用绝对位置，而不是绝对位置。正如yckart所说，填充也是一种很好的方法。如果内容比屏幕小，就不太好看；）如果他想获得一个粘性的页脚，那么在这种情况下，问题就在其他地方。
.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}