CSS页脚在每个维度中都不能正常工作

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

以下是JSFIDLE：

这两张图片是我所说的例子

第一个图像是它在较小屏幕上的外观以及它应该始终的外观。正如您所见，背景色适合每个元素。

第二幅图像显示在更大的屏幕上。

如您所见，页脚的背景色不适合整个对象。 起初，我认为问题可能与媒体屏幕有关，但事实并非如此

顺便说一句，我正在修改这个原始页脚

加：

溢出：隐藏

至
\u页脚

这将包含浮动的元素，这些元素将内容推到元素之外，迫使元素与其展开。
正如您将
浮动：左
赋予
一样，您需要清除它或将
溢出：隐藏
添加到
\u footer>ul

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

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