Question

我在使用display时出现问题：CSS的表格功能。我正在使用我的基本大纲，但现在我想让两个DIV填充表格单元格中的垂直空间。听起来很简单，但我不知道该怎么做。这是一个例子：

aaaaaaaaaaaaaa  bbbbbbbbbbbbbbbbbbbbbbb
a            a  b  ccccccccccccccccc  b
a            a  b  c               c  b
a            a  b  c               c  b
a            a  b  c               c  b
a            a  b  c               c  b
a            a  b  ccccccccccccccccc  b
a            a  b  dddddddddddddddddd b
a            a  b  d                d b
a            a  b  dddddddddddddddddd b
a            a  b                     b
a            a  b                     b
aaaaaaaaaaaaaa  bbbbbbbbbbbbbbbbbbbbbbb

DIV a是侧栏并编码为显示：table-cell DIV b是一个身体区域，编码为显示：table-cell

在身体“b”的内部，我有两个列DIV，其中Id为c和d。我想要的是DIV d伸展到DIV b的底部以填充剩余的空间。

这是带内联样式的代码，只是为了便于阅读：

<div>
    <div id="a" style='display: table-cell; background-color: red;'>aaaaaa
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        aaaaaa
    </div>
    <div id="b" style='display: table-cell; background-color: green;'>bbbbbb
        <div id="c" style='background-color: pink;'>
            <br>
            <br>
        </div>
        <div id="d" style='background-color: yellow;'>
            <br>
            <br>
        </div>
    </div>
</div>

Fiddle demo

有人能想出一个编码的好方法吗？我似乎无法让它发挥作用。

Answer 1

如果您只对视觉效果感兴趣，可能会对仿制列感兴趣：http://www.alistapart.com/articles/fauxcolumns/

以下是更新使用该技术的示例（在这种情况下不需要的图像）：

<div>
    <div id="a" style='display: table-cell; background-color: red;'>aaaaaa
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        aaaaaa
    </div>
    <div id="b" style='display: table-cell; background-color: yellow;'>
        <span style='background-color: green;'>bbbbbb</span>
        <div id="c" style='background-color: pink;'>
            <br>
            <br>
        </div>
        <div id="d">
            <br>
            <br>
        </div>
    </div>
</div>

http://jsfiddle.net/uMSEC/2/

如果您确实想要在列的末尾放置内容，您仍然可以通过创建b relative并将另一个div置于绝对值bottom: 0来完成。

如何在显示器中制作DIV：table-cell填充单元格？

1 个答案: