Jquery 使用CSS将div放置在页面底部_Jquery_Css

Jquery 使用CSS将div放置在页面底部

jquery css

Jquery 使用CSS将div放置在页面底部,jquery,css,Jquery,Css,在发布到这个论坛之前，我没有找到答案我需要在页面底部放置一个页脚，但我需要它足够灵活，可以被内容向下推，如果有足够的页脚溢出折叠的话我尝试了以下内容，它确实将它放置在我需要的位置，但是它与下面的内容重叠 footer { position: fixed; bottom: 0 } 我可以用jQuery通过计算页脚上方的所有div高度来修复它，但我想知道是否有一种方法可以仅用CSS来实现它。您需要将位置更改为固定的到相对的我制作了一个jsfiddle来帮助您了解它的工作原理

在发布到这个论坛之前，我没有找到答案

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

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

footer {
    position: fixed; 
    bottom: 0
}

我可以用jQuery通过计算页脚上方的所有div高度来修复它，但我想知道是否有一种方法可以仅用CSS来实现它。

您需要将

位置更改为固定的到相对的
我制作了一个jsfiddle来帮助您了解它的工作原理


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

这也是我在制作投资组合时突然想到的。如果您没有设置页脚的高度，那么您应该在CSS
中的html
标记中添加相同的background

html {
   background: #ff7200;
}

footer{
   background: #ff7200;
}


（如果您查看公文包，请进入控制台，从我的主页上删除一些tabsM，看看它是如何工作的。）
此效果将填充页脚
或正文
标记中最后一个元素之后的任何空白。我想这可能正是你想要的，因为你没有设定的高度。
HTML:
<body>
        <div class="wrapper">
            Your website content here.
            <div class="push"></div>
        </div>
        <div class="footer">
            Footer goes here
        </div>
</body>

此处提供更详细的说明：

编辑：使用jQuery进行动态高度计算：
我建议您使用模型，因为它几乎是您所需要的
问题是，你无法预测你的页脚高度。那么，您需要在DOM ready上使用这一小块jQuery代码：
var footer = $("#footer");
var footerHeight = footer.outerHeight();
footer.css('margin-top', '-'+footerHeight+'px');

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

只需动态更改#footer
的负页边距顶部
，以及与#footer
高度相对应的#main
的填充底部

你知道你脚的高度吗？如果是这样，您可以在内容div
中添加适当的padding bottom
，以防止重叠。使用术语sticky footer
so进行搜索，你想把它放在窗口的底部，除非页面比窗口长？？？@j08691不幸的是，我不能使页脚固定高度…如果内容比窗口低，页脚不会放在底部，为了实现这一点，您需要使用一些jquery来检查屏幕大小，如果内容小于最大屏幕高度，则将位置更改为绝对值。见fiddle谢谢，伙计，我会尝试在第二个fiddle上为您编写一些jquery，但现在它们显示了更改是如何工作的。这种“粘性页脚”解决方案也有同样的问题。由于我不知道页脚的高度，因此无法使#推到与页脚相同的高度。在这种情况下，请查看我的小提琴，它获取页脚的高度，并使用jQuery相应地填充值：
var footer = $("#footer");
var footerHeight = footer.outerHeight();
footer.css('margin-top', '-'+footerHeight+'px');

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