如何在不使用固定位置的情况下使元素捕捉到屏幕底部

Question

页脚元素需要对齐到屏幕底部，但是不能使用固定位置，因为如果内容太长，它将仍然存在。

http://creative.edulence.com/colonnade-properties/

目前的CSS：

#footer {
background-color: black;
min-height: 40px;
padding-top: 70px;
width: 100%;
position: relative;
}

现在，如果您的屏幕较小，则可以正确显示，但如果屏幕太大，则页脚下方会有一个缝隙

Answer 1

有关如何执行此操作的演示，请参阅Matthew James Taylor 的页面底部如何保持页脚 。

我已经成功完成了很多次

Answer 2

您可以尝试将其包装在div中，并为该div设置页脚高度的底距，然后为该包装div设置相对位置，并将页脚的绝对位置为bottom：0px。 尽管无法测试atm，但我看不出为什么这行不通。

如果这样不起作用，请尝试使用jquery将页脚的高度添加到包装div的高度。

所以像

$('#wrapper').height($(this).height() + $('#footer').height());

它将到达那里并使用相同的position元素:)