Html CSS在DIV中的停靠

我有一些HTML目前看起来像这样（在几个不同的页面中；一个页面将有多个）：

通过JavaScript，它将在运行时以编程方式填充与以下内容类似的内容：

    <div class="container">
        <div class="content">...</div>
        <div class="button1">...</div>
        <div class="button2">...</div>
        <div class="button3">...</div>
    </div>

...
...
...
...

“视图”div的大小将根据包含页面定义（它可能是固定的px宽度/高度，也可能是百分比宽度/高度，具体取决于特定页面）。但其大小不允许受其内容的影响

三个按钮div应显示在包含div的底部（注意：不是页面或窗口！），具有固定的高度并均匀分布宽度（即三个相等的列）

contentdiv应该消耗容器div中所有剩余的空间——同样，它的大小不应该受到它自己的内容的影响

请注意，“视图”div的实际大小在编写CSS规则时是未知的，因此“内容”不能用像素表示其大小

我如何用CSS来表达这一点？到目前为止，我的尝试已经成功地满足了这些约束中的一个或另一个，但不是一次全部满足。请注意，主要目标是Chrome17（或者实际上是与之相当的Webkit浏览器），这意味着我可以使用一些CSS3，但不能使用一些更好的box功能。我不必担心它在旧的IE中工作，但如果不是这样的话，多浏览器支持就更好了

---

（如果需要的话，我可以在“container”中重新构造div，包括添加子父级，但“view”和“container”本身都需要这样。）

好的，在反复摸索之后，我想我已经找到了神奇之处。不确定这是否可以进一步改进

HTML:

（请注意，我还没有测试大型内容；我怀疑我可能需要添加

overflow:hidden

或其他内容。）

一个小麻烦是，为这些元素添加边距似乎不可行，因为这样它们就偏离了正确的定位。我想可以做更多的

calc

magic来计算边距，但使用内部div来绘制边框可能更容易

    <div class="container">
        <div class="content">...</div>
        <div class="button1">...</div>
        <div class="button2">...</div>
        <div class="button3">...</div>
    </div>

<div class="view" style="width: 960px; height: 180px">
    <div class="container">
        <div class="content">...</div>
        <div class="button1">...</div>
        <div class="button2">...</div>
        <div class="button3">...</div>
    </div>
</div>

container
{
    width: 100%;
    height: 100%;
}

content
{
    position: relative;
    width: 100%;
    height: calc(100% - 5ex);
}

button1, button2, button3
{
    float: left;
    position: relative;
    width: 33.333%;
    height: 5ex;
}