html - DIV 内的 CSS 对接

Question

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

<div class="view"></div>

通过 JavaScript，这将在运行时以编程方式填充类似于以下内容:

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

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

三个按钮 div 应该出现在包含 div 的底部(注意:不是页面或窗口!)，高度固定，宽度均匀分布(即三个相等的列)。

内容 div 应该占用容器 div 中的所有剩余空间——同样，它的大小不应受其自身内容的影响。

请注意，在编写 CSS 规则时，“view”div 的实际大小是未知的，因此“content”无法以像素表示其大小。

如何在 CSS 中表达它？到目前为止，我的尝试已经设法满足这些限制中的一个或另一个，但不是同时满足所有限制。请注意，主要目标是 Chrome 17(或者实际上是等效的 Webkit 浏览器)，这意味着我可以使用一点 CSS3，但不能使用一些更好的盒子。我不必担心它在旧 IE 中的工作，但多浏览器支持会很好。

(如果需要，我可以在“container”中重组 div，包括添加子父项，但“view”和“container”本身都需要这样。)

Answer 1

好的，经过大量摸索，我想我找到了魔法。不确定是否可以进一步改进。

HTML:

<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>

CSS:

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;
}

(请注意，我还没有测试大型内容；我怀疑我可能还必须添加 overflow: hidden 或其他内容。)

一个小烦恼是，为这些元素添加边距似乎不可行，因为那样它们就会脱离正确的定位。我想也许可以做更多的 calc 魔法来计算边距，但使用内部 div 来绘制边框可能更容易。