2

如果内容比视口长，我正在尝试获得一个始终位于视口底部的页脚。如果内容没有延伸到视口的底部，则页脚将停留在内容的底部。

这是我的 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;
}
4

3 回答 3

0

您的页脚 ( #footersurround) 已经有了position: fixed，只需给它bottom: 0而不是top: 0. 无需设置width,height和max-height. 演示。

于 2012-06-30T23:30:29.900 回答
0

The key would be to compare viewport height with document scroll height and set the footer's position (absolute or fixed) accordingly. Here's something I knocked up (jQuery assumed).

<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>
于 2012-06-30T23:35:28.993 回答
0

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

于 2012-06-30T23:20:32.197 回答