css - 页脚不同的部分高度

Question

所以我正在做这个元素，但我被页脚困住了。我遇到了这个问题，页脚的第二部分变大并超出了页脚。另一件事是当我做 float:left;在页脚的第三部分，页脚的背景消失了。所以我的问题是，如何在页脚中包含所有内容。这是代码笔 - https://codepen.io/anon/pen/gxjbyg .

如果我这样做:

footer {
background: rgba(0,0,0,0.15);
clear: both;
position:absolute;
width:100%;
bottom:0;
}

有点固定了，但我想知道是否有另一种方法，同时不使用绝对定位。

Answer 1

这就是你所期望的？

footer {
 background: rgba(0,0,0,0.15);
 clear: both;
 display: table;
 width: 100%;
}