html - 4 列响应式 CSS 页脚

Question

我正在尝试创建一个基本的 4 列 CSS 页脚，以响应不同的屏幕分辨率（台式机、平板电脑、移动设备）。

页脚的最大宽度为 980 像素，如果窗口较大，则蓝色背景会扩展以填充窗口。随着窗口缩小（低于 980 像素），列堆叠在一起（参见我的图表）。

现在蓝色背景不起作用，并且当窗口缩小时列没有堆叠，而是列的宽度缩小了。

小提琴：http: //jsfiddle.net/Gar3H/

HTML

<div id="wrapper">
<div id="footer">
<div class="footerFloat">
<h4>Header 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="footerFloat">
<h4>Header 2</h4>
<ul>
  <li>Line 1</li>
  <li>Line 2</li>
  <li>Line 3</li>
  <li>Line 4</li>
</ul>
</div>
<div class="footerFloat">
<h4>Header 3</h4>
<ul>
  <li>Line 1</li>
  <li>Line 2</li>
  <li>Line 3</li>
  <li>Line 4</li>
</ul>
</div>
<div class="footerFloat">
<h4>Header 4</h4>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>

CSS

#wrapper {
    width: 100%;    
    max-width: 980px;
    margin: auto;
} 


#footer {
    background-color: blue;
    width: 100%;
} 

.footerFloat {
    width: 25%;
    float: left;
}

Answer 1

这是一个工作版本

http://jsfiddle.net/Gar3H/2/

CSS：

    #footer {

        width: 100%;
        margin: auto;
    }
    .footerFloat {
    width: 100%;
    }
@media all and (min-width: 950px) {
    #footer {

        width: 980px;
        margin: auto;
    } 
    .footerFloat {
    width: 25%;
    float: left;
    }
}

#wrapper {
    background-color: blue;
    width: 100%;
    overflow:hidden;
} 

它使用媒体查询以及浏览器如何优先考虑 CSS 规则

Answer 2

像这样

演示

css

#wrapper {
    width: 100%;    
    max-width: 980px;
    margin: auto;
} 


#footer {
    background-color: blue;
    width: 100%;
    float:left;
} 

.footerFloat {
    width: 25%;
    float: left;
    min-width:200px;

}