浮动页脚命中绝对定位的 div答案

【问题标题】：Floating footer hits absolute positioned div浮动页脚命中绝对定位的 div
【发布时间】：2013-07-24 13:57:01
【问题描述】：

我正在尝试创建一个响应式的页脚并粘在页面的右下角，但是当绝对定位的 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 淡入淡出时对象跳来跳去。

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

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

【问题讨论】：

为什么不从.abouttext 中取出position: absolute？它似乎对我有用。
但这打破了我正在使用的淡入淡出效果:(

标签： html css twitter-bootstrap

【解决方案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;
}

结果：

红色 - 页面的主容器，绿色 - 页脚容器（始终位于主容器之后），蓝色 - 页脚。

附：对不起我的英语:)

【讨论】：

【解决方案2】：

我想我找到了！

试试这个：

.main {
   padding-bottom: 140px;
}

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

【讨论】：