-2

christianselig.com/contact

出于某种原因，页脚仅在这一页的一半处停留，但其他所有似乎都还可以。找了好久也找不到原因。

我已将相关的 HTML 和 CSS 放在下面，显然还有更多可用的内容。

HTML：

                <div class="alt-contact">
                    <p>Prefer manual contacting? <a href="mailto:me@example">Email me.</a></p>
                </div>
            </div> <!-- This div corresponds to the content wrapper div above -->

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

CSS：

.footer-wrapper {
    background: #f7f7f7; /* Old browsers */
    background: -moz-linear-gradient(top,  #f7f7f7 0%, #d6d6d6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#d6d6d6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f7f7f7 0%,#d6d6d6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f7f7f7 0%,#d6d6d6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f7f7f7 0%,#d6d6d6 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #f7f7f7 0%,#d6d6d6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#d6d6d6',GradientType=0 ); /* IE6-9 */
    border-top: 1px solid #ccc;
    bottom: 0;
    height: 16px;
    overflow: hidden;
    padding: 8px 0 5px 0;
    position: absolute;
    width: 100%;
}

    .footer {
        color: #808080;
        clear: both;
        font-family: 'Lucida Grande', Helvetica, Arial, sans-serif;
        font-size: 0.7em;
        margin: auto;
        width: 900px; 
    }
4

2 回答 2

2

你应该有：

html,
body {
    height: 100%;
}

Your html has no height given to it, so it's only as tall as the body pushes it. Note, in IE8 and less you have to use "tricker" solutions like Ryan Fait's Sticky Footer:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    /* the bottom margin is the negative value of the footer's height */
    margin: 0 auto -142px; 
}
.footer, .push {
    /* .push must be the same height as .footer */
    height: 142px; 
}

/* Sticky Footer by Ryan Fait
   http://ryanfait.com/       */

I've used it; it works. It gives you headaches, though, because it essentially takes margin and padding flexibility away from you. Which can be a pain.

于 2012-09-16T18:03:43.937 回答
0

是的，这是因为position: absolute;不会制作粘性页脚。如果你想要一个粘性页脚，你需要使用position: fixed;. 这将使页脚相对于浏览器窗口保持在同一位置，而不是下一个相关的父对象。

祝你好运，
-布赖恩

于 2012-09-16T17:58:29.970 回答