3

有问题的网站:christianselig.com

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

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>

正如你所看到的,我以为我给.messageCSS 150px 的顶部和底部边距,但它似乎并没有在底部开始。我可以给它填充,但这似乎不是一个合适的解决方案,因为我不希望元素跨越那么大的空间,我只想让它向下推其他东西。

潜在的理解:边距使它远离内容,但那里必须有内容。因为它是页面上的最后一个元素,它没有什么可以推开的,所以填充是必要的吗?如果这是真的,有更好的方法吗?

4

4 回答 4

2

填充对我很有用:

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

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

于 2012-09-16T00:17:27.620 回答
1

一切都有些破损,因为您没有清除 .personal-info 上的浮动

你可以使用这个 clearfix

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

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

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

此外,最好使用粘性页脚而不是绝对位置。正如 yckart 所说,填充也是一种很好的方法。

于 2012-09-16T00:31:07.350 回答
0

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-wrapperdiv 不需要(据我所见?)

编辑:正如另一个答案中提到的,清理有点混乱。添加

.wrapper {
    padding-bottom: 1px;
}

如果您想要快速修复似乎会有所帮助,但适当的清理会更好。

此外,您可能希望在页面顶部添加一个文档类型,例如:

<!doctype html>

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

于 2012-09-16T00:16:24.877 回答
0

这是因为您的页脚绝对位于底部,放置在发生在那里的任何东西上。

只需在底部添加一个 50px 的填充,.message如果会在其下方腾出一个额外的空间。

.message {
    margin: 150px 0;
    padding-bottom: 50px;
    text-align: center;
}
于 2012-09-16T00:30:35.977 回答