html - 浮动页脚命中绝对定位的 div

Question

我正在尝试创建一个响应式页脚并粘在页面的右下角，但是当绝对定位的 div 位于同一页面上时，它无法始终如一地工作。

我正在使用的代码可以在以下位置看到：

http://192.241.203.146/sample-page/

我努力了：

position: absolute;
bottom: 0;
right: 0;
margin-bottom: 10px;
margin-top: 40px;

也：

float: right;
bottom: 0;
right: 0;
margin-bottom: 40px;
margin-top: 40px;

让它工作，但它不尊重页面上的绝对定位内容，当它被调整到移动设备时。它像这样发生冲突：

我知道使用 position:absolute 意味着从对象流中删除了 div，但我需要在页面中间的元素上使用它，以避免在我使用 jQuery 淡入淡出时对象跳来跳去。

我怀疑这是因为根据我使用的引导程序基础，它不在跨度或行内。那是问题吗？

我在这里不知所措 - 任何指导表示赞赏:)

Answer 1

你的问题是 div 对页面来说是正常的，但是他的位置是绝对的。检查你的代码我看到了这个：

如果您希望页脚始终在底部可见，您可以将页脚包装到宽度为页面宽度的 100% 的 div 中。像这样：

div#footer_container{
min-width: 100%;
min-height: 100px;
position: relative;
}
div#footer_container div#footer{
position: absolute;
right: 0px;
bottom: 0px;
}

结果：

红色 - 页面的主容器，绿色 - 页脚的容器（它总是在主容器之后），蓝色 - 你的页脚。

PS对不起我的英语:)

Answer 2

我想我找到了！

尝试这个：

.main {
   padding-bottom: 140px;
}

即使我减小浏览器的宽度，它也对我有用。