html - float 页脚命中绝对定位的 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 淡入淡出时对象跳来跳去。

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

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

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;
}

结果:

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

附言对不起我的英语:)