0

在此论坛上发帖之前，我没有找到任何答案。

我需要在页面底部放置一个页脚，但我需要它足够灵活以被内容向下推，如果有足够的溢出折叠。

我尝试了以下方法，它确实将它定位在我需要的位置，但是它与下面的内容重叠。

footer {
    position: fixed; 
    bottom: 0
}

我可以通过计算页脚上方的所有 div 高度来用 jQuery 修复它，但我想知道是否有办法只用 CSS 来完成它。

4

3 回答 3

1

您需要将position:更改fixed为relative.

我制作了一个 jsfiddle 来帮助您了解它是如何工作的。

jsfiddle

jsfiddle 首屏

我根本不是 jquery/javascript 的神，但我发现这个有用的链接可以找到浏览器的最大高度。您将使用此代码来查找浏览器的高度，然后，我最好的猜测是一个 if 语句。如果footer或div高于此高度，则执行.css('position', 'absolute');

浏览器高度

这也是我在处理投资组合时突然想到的。如果您没有为页脚设置高度，那么您应该将其添加background到html标签中CSS

html {
   background: #ff7200;
}

footer{
   background: #ff7200;
}

html页脚jsfiddle

我的作品集（如果您查看作品集，请进入控制台并从我的主页上删除一些标签，看看它是如何工作的。）

此效果将填充标记footer中第一个或最后一个元素之后的任何空白。body我认为这可能正是您想要的，因为您没有设定高度。

于 2013-09-13T15:02:36.907 回答
0

I would recommend you to use the Sticky Footer model as is it what you almost need.

The thing is that you can't predict your footer height. Well, you will need to use this small piece of jQuery code on DOM ready :

var footer = $("#footer");
var footerHeight = footer.outerHeight();
footer.css('margin-top', '-'+footerHeight+'px');

var main = $("#main");
main.css('padding-bottom', footerHeight+'px');

What is simply does is to change dynamically the negative margin-top of the #footer and the padding-bottom of the #main corresponding to the #footer height.

The Demo

于 2013-09-13T15:22:15.880 回答
0

HTML：

<body>
        <div class="wrapper">
            Your website content here.
            <div class="push"></div>
        </div>
        <div class="footer">
            Footer goes here
        </div>
</body>

CSS：

* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em; //negative margin must be the same as your footer/push height
}
.footer, .push {
height: 4em; //height of your footer
}

更详细的解释在这里：

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

编辑：使用 jQuery 进行动态高度计算：http: //jsfiddle.net/KyVpc/

于 2013-09-13T15:05:14.683 回答