Question

我已经设置了问题here。

我有2个div，每个div都用黑色边框勾勒出来。一个是我的内容div（包含文本），高度设置为600px;另一个包含横幅图片的div，我想用作我页面的页脚。我可以通过简单地用“底部：25px”标记div来进行绝对定位。但是，我希望做的是当缩小浏览器窗口的大小时，当它与内容div发生碰撞时，使页脚div“停止”。

有什么想法吗？非常感谢！

Answer 1

我是这样做的。从http://ryanfait.com/sticky-footer/得到了技术。他添加了一个额外的“推”div，但我使用了包装器的填充底部来提供相同的功能（不需要空DIV）。

以下是一个示例（您可以在http://ve.savantcoding.com/example.html上查看）

<html>
<head>
    <title>sample footer</title>
    <style type="text/css">
    * {
        margin: 0;
    }
    html, body {
        height: 100%;
    }
    #wrapper {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin: 0 auto -200px; /* bottom margin is negative footer height */
    }
    #content {
        padding-bottom: 200px /* bottom padding is footer height */
    }
    #footer {
        height: 200px;
    }
</style>
</head>
<body>
<div id="wrapper">
    <div id="content">your content</div>
</div>
<div id="footer">your banner</div>
</body>
</html>

页脚在绝对或固定以外的位置？

1 个答案: