CSS页脚在每个维度上都无法正常工作

Question

我正在尝试创建一个响应式页脚。到目前为止我唯一的问题是，在不同的屏幕尺寸中，页脚背景颜色会消失。在较小的屏幕中，页脚背景颜色正确显示，在大屏幕中，它仅显示为50px。

这里是jsfiddle：http://jsfiddle.net/22Quu/

以下两张图片展示了我所说的内容。

第一张图片是它在较小的屏幕中的外观以及它应该如何显示。如您所见，背景颜色适合每个元素。

第二张图像以较大的屏幕显示。

如您所见，页脚的背景颜色不适合整个对象。 起初我认为问题可能与media screen有某种关系，但它不是。

顺便说一句，我正在调整这个原始页脚http://www.script-tutorials.com/demos/374/

Answer 1

由于您已将float: left提交至<li>，因此需要将其清除或将overflow: hidden添加到._footer > ul

    <footer class="_footer">    
    <ul>
<li><!--your content--></li>
<li><!--your content--></li>
<li><!--your content--></li>
<li class="clear" ></li>
    </ul>
    </footer>

CSS for clear class

._footer > ul li.clear {
float:none;
clear: both;
width: auto;
padding: 0;
}

Answer 2

Demo Fiddle

添加：

overflow: hidden;

到._footer

这将包含浮动元素，这些元素将元素推送到元素外部，迫使它随之扩展。