Question

如果内容比视口长，我试图获得一个始终位于视口底部的页脚。如果内容未拉伸到视口的底部，则页脚将保留在内容的底部。

这是我的HTML：

<div id="wrapper">
    <!-- variable content and other divs in here -->
    <div id="footersurround">
        <div id="footerparent"> 
            <div id="footer"></div>
            <div id="linkshome"><!-- links in here --></div>
        </div>
    </div>
</div>

和CSS：

#wrapper {
    position: absolute;
    left: 50%;
    width: 1024px;
    margin: -512px;
    margin-top: 8px;
}

#footersurround {
    position: fixed;
    top: 0;
    max-width: 1024px;
    width: 100%;
    height: 100%;
    max-height: inherit; /* I want this to take the same value as the wrappers height if I set it to a value(e.g 768px) it works perfectly but when setting it to inherit it will stretch the whole viewport even if the wrapper does not*/
}

#footerparent {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 30;
}

#footer {
    position: absolute;
    bottom: 0;
    margin: 0 auto;
    min-height: 60px;
    width: 1024px;
    background-color: black;
    opacity: 0.50;
    filter: alpha(opacity=50); /* For IE8 and earlier */
    z-index: 16;
}

#linkshome {
    position: absolute;
    bottom: 0;
    margin: 0 auto;
    margin-top: -47px;
    min-height: 47px;
    width: 100%;
    max-width: 1074px;
    z-index: 17;
    text-align: center;
    font-size: 24px;
    font-family: Verdana;
    color: white;
}

Answer 1

这应该这样做：http://ryanfait.com/sticky-footer/

Answer 2

您的页脚（#footersurround）已有position: fixed，只需将其bottom: 0代替top: 0。无需设置width，height和max-height。 DEMO

Answer 3

关键是将视口高度与文档滚动高度进行比较，并相应地设置页脚的位置（绝对或固定）。这是我被击倒的东西（jQuery假设）。

<head>
    <script src='jquery.js'></script>
    <script>
    $(function() {
        var footer = $('footer'), doc = document.documentElement || document.body;
        footer.css('position', doc.scrollHeight <= $(window).height() ? 'absolute' : 'fixed');
    });
    </script>
    <style>
    body { margin: 0; }
    section { height: 600px; margin-top: 50px; border: solid 1px; position: relative; padding: 10px 10px 40px 10px; }
    footer { bottom: 0; width: 100%; height: 30px; background: red; left: 0; }
    </style>
</head>
<body>
    <section>
        <h1>main content here</h1>
        <footer></footer>
    </section>
</body>

固定页脚不会超过内容的底部

3 个答案: