CSS 响应式页脚答案

【问题标题】：CSS Responsive FooterCSS 响应式页脚
【发布时间】：2014-09-26 10:35:23
【问题描述】：

除页脚外，该网站的大部分内容在包括移动设备在内的所有浏览器中都能很好地显示。

在 1600X900 尺寸下，页脚完美显示。在分辨率高度低于 900 的网站上，页脚会消失。我已经尝试了所有我能想到的让页脚“捕捉”到屏幕底部的方法，并且显然超出了我的专业领域。使用最新的 Chrome 和 Firefox 进行了测试，结果相似/相同（我猜这很好，哈哈）。

如何让底部的黑色元素贴到页面底部？

网站网址：http://bit.ly/1ro8FtA

不同维度的截图：http://bit.ly/1uLGgNX

【问题讨论】：

添加一些代码怎么样？ PS：用“查看页面源代码”查看它很酷，但是有一天您的网站可能会消失，然后可能与您遇到相同问题的人将无法找到有用的信息。
您的页脚在我的计算机上运行良好。你确定你没有任何缓存问题吗？
我同意@KevinLabécot 的观点
你们在看什么维度？只有在 900 高度以下才会出现问题。
@RoccoTheTaco 使用 Chrome 从 +1200 高度到 400 像素进行了测试。

标签： html css responsive-design stylesheet

【解决方案1】：

如果我理解正确（如果您只想移动页脚而不是全黑区域），请尝试更改您的 CSS：

.agentpress-pro-black .site-footer {
    background-color: #000000;
    font-size: 16px;
    padding: 40px 0;
    text-align: center;
}

到这里：

.agentpress-pro-black .site-footer {
    background-color: #000000;       
    font-size: 16px;
    padding: 40px 0;
    text-align: center;
    width: 100%; /*new*/
    bottom: 0; /*new*/
    position: fixed; /*new*/
}

注意

如果你想要全黑区域，那么你应该改变你的 HTML，并移动你所有的黑色区域，以便固定一个定位容器

【讨论】：

@Benjamin 我不确定 OP 是否只需要页脚，如果是这样，则此代码有效，但如果 OP 想要所有 BLACK 区域，那么 OP 还有 2 个 div 可以定位。
我希望他能更好地将它们全部包装在一个单独的容器中，定位将解决 OP 的问题。
是的，我正要说，如果 OP 想要移动所有黑色区域，那么 OP 应该更改他的 HTML 以便固定一个定位容器
我要把这个添加到我的答案中:)
如果你这样做，那就太好了，我会给你另一个 +1 :)