html - CSS 响应式页脚

Question

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

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

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

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

不同尺寸的屏幕截图:http://bit.ly/1uLGgNX

Answer 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，并移动你所有的黑色区域以固定一个定位容器