浮动页脚击中绝对定位的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对于页面是正常的，但他的位置是绝对的。检查你的代码我看到了：

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

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

结果：

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

P.S。抱歉我的英文：）

Answer 2

我想我找到了它！

试试这个：

.main {
   padding-bottom: 140px;
}

即使我缩小了浏览器的宽度，它也适合我。