有趣的问题！
为什么这很有意思
以前，这个问题根本无法回答，并且在没有JavaScript和/或设置CSS的预定义宽度的情况下被认为是相当不可能的。
因此，这就是Web技术显然取得了进展的地方，而不是使用表格、浮动、JavaScript、预定义宽度元素，只需使用一点点CSS3魔法，您在问题中的目标就可以实现...
CSS3解决方案
使用 flex-boxes（最近在大多数现代浏览器中引入的技术），您可以轻松地使子元素从固定对齐的父元素中浮动出来。
您可以使用以下代码定义一个flex-box：display: flex; 并使用 flex: 1; 引入浮动内容。
HTML结构
以下代码定义了本答案（和演示）将使用的结构：
<div id="parent">
<div class="child">
<div class="child-content">
<div class="actual-child-content">Wowww! The power of CSS3 is awesome</div>
</div>
</div>
</div>
#parent 是要固定在底部的容器，.child 的作用将在后面探讨，而 .child-content 中的所有内容都是父容器中可见的。
需要使用的 CSS
#parent {
position:fixed;
bottom:0;
left: 0;
height:40px;
overflow:visible;
border:solid #000 1px;
width:100%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
list-style: none;
padding: 0px 0px 0px 20px;
margin: 0px 0px 0px -20px;
}
.child {
-webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
flex: 1;
position:relative;
overflow:visible;
margin-right:10px;
margin-bottom:10px;
}
.child-content {
position:absolute;
bottom:0px;
border:solid #000 1px;
background-color:#fff;
height:104px;
width:100%;
}
.actual-child-content {
padding:10px;
}
对于形状的定义，#parent和.child都做出了贡献。而.child-content则处理了将.child从#parent预定义的高度中分离出来并且“溢出”主体的内容。在底部有一个容器#parent，而.child是盒子，根据盒子数量平均分配内容。
演示 | 源代码
不仅仅是一个盒子
那么，在#parent里如何浮动第二个盒子呢？
嗯，因为css3功能强大，使用flex-boxes对开发人员来说也是一种梦想，如果要添加另一个盒子以便放置在第一个盒子旁边，可以简单地在#parent中添加另一个.child元素。
<div id="parent">
<div class="child">
<div class="child-content">
<div class="actual-child-content">Wowww! The power of CSS3 is awesome</div>
</div>
</div>
<div class="child">
<div class="child-content">
<div class="actual-child-content">Wow, a second box that's floating fine!</div>
</div>
</div>
</div>
现在，你就拥有了一种基于网格的系统，而不需要使用浮动、javascript或设置预定义宽度的混乱方法。
演示
实际上，这一个CSS代码非常强大，你可以将其简单地重用到更多子框中...
<div id="parent">
<div class="child">
<div class="child-content">
<div class="actual-child-content">Wowww! The power of CSS3 is awesome</div>
</div>
</div>
<div class="child">
<div class="child-content">
<div class="actual-child-content">Wow, a second box that's floating fine!</div>
</div>
</div>
<div class="child">
<div class="child-content">
<div class="actual-child-content">Man, this is powerful.....</div>
</div>
</div>
</div>
演示
它们都能很好地浮动！告别使用表格属性设置div或者使用*发抖*表格的旧时代...
额外奖励
以下是我的代码：