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中工作，但是否则多浏览器支持会很好。

（如果需要让事情有效，我可以重组“容器”里面的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来绘制边框可能更容易。

DIV中的CSS对接

1 个答案: