Question

出于某种原因，页脚仅在这一页的页面的一半处粘住，但所有其他页面看起来都没问题。我已经看了很久，也无法找到原因。

我已将相关的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; 
    }

Answer 1

你应该：

html,
body {
    height: 100%;
}

您的html没有height给它，所以它只有body推高它一样高。请注意，在IE8中，你必须使用像R yan Fait's Sticky Footer这样的“tricker”解决方案：

* {
    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/       */

我用过它;有用。但是，这会给您带来麻烦，因为它基本上需要margin和padding灵活性。这可能是一种痛苦。

Answer 2

是的，这是因为position: absolute;没有粘性页脚。如果您需要粘性页脚，则需要使用position: fixed;。这将使页脚停留在相对于浏览器窗口的相同位置，而不是下一个相关的父对象。

祝你好运，
-Brian

粘性页脚不会给予粘性行为

2 个答案: