[Ctrl A 全部选择 提示：你可先修改部分代码，再按运行]
4、为了让 footer 能够刚好在最下方，我们可以给 footer 加一个等于自身高度的上方的负边距强制把它向上推一个自身的高度，即 margin-top: -50px; 。但是这样的话当内容超过一屏我们会看到内容会盖在 footer 的上方，显然这是失败的。所以我们还要给 content-box 和 sidebar 加一个父级元素，设定它的下方内补丁等于 footer 的高度，强制把 content-box 和 sidebar 向上推一个 footer 的高度。同时，因为 content-box 和 sidebar 是浮动元素，所以我们还要让它 闭合浮动元素 。 这样就比较完美了。
#out-content {
padding-bottom: 50px;
}
#out-content:after {
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}
* html #out-content {
height: 1%;
}
#footer {
height: 50px;
background: Background;
margin: -50px auto 0;
}
[Ctrl A 全部选择 提示：你可先修改部分代码，再按运行]
5、举一反三，利用上面的原理我们还可以做一个一边固定宽度一边自适应宽度的液态弹性布局，修改一些宽度然后给 #content-box 下面再套一层就可以实现了。