相关疑难解决方法(0)

我已经看过这个问题并且用Google搜索了一下,但到目前为止还没有任何效果.我现在认为它是2010年(那些问题/答案很老,而且很好,没有答案)我们有CSS3!有没有办法让一个div使用CSS填充整个表格单元格的宽度和高度？

我不知道单元格的宽度和/或高度是提前的,并且将div的宽度和高度设置为100%不起作用.

另外,我需要div的原因是因为我需要绝对将一些元素放在单元格之外,并且position: relative不适用于tds,所以我需要一个包装div.

我需要动态构建一个表来保存一些数据.
我遵循了使用div的常用方法display: table,display: table-row并且display: table-cell:

.tab {
    display: table;
    height:100%;
    width: 200px;
}

.row {
    height: 100%;
    display: table-row;
}

.elem {
    border: 1px solid black;
    vertical-align: top;
    display: table-cell;
    height:100%;
    background: blue;
}

.content {
    height: 100%;
    background: greenyellow;
}

<div class="tab">
    <div class="row">
        <div class="elem">
            <div class="content">
                Content
            </div>
        </div>
        <div class="elem">
            <div class="content">
                Longer content that will need to wrap around eventually you know and don't you hate it when things …

在这里,IE和Chrome已经回答了这个问题,但是建议的解决方案似乎不适用于Firefox 16,45,也可能是介于两者之间的所有版本.

基本上,建议的解决方案如下:

table,th,td {
  border: 1px solid black;
}

<table>
  <tr>
    <td style="height:1px;">
      <div style="border:1px solid red; height:100%;">
        I want cell to be the full height
      </div>
    </td>
    <td>
      This cell
      <br/>is higher
      <br/>than the
      <br/>first one
    </td>
  </tr>
</table>

通过设定height的td到1px,孩子div可以设置height:100%.在Chrome和IE中,100%它被解释为"单元格的高度",而在Firefox中它似乎成为divs内容所需的最大高度 .

在Firefox中运行上面的示例将直观地说明这一点......

所以,我正在寻找一种在Firefox中也能运行的解决方案.

我正在尝试使用display table-cell属性创建两列100%高度布局.它在Chrome上运行良好,但我在Firefox和IE上都没有成功.

这是小提琴:http://jsfiddle.net/ehfa0kk8/5/

看看它在Chrome上的工作原理.知道如何使这项工作？

<div id="table">
    <div id="row">
        <div id="cell_1">
            <div id="overflown_div">
                long content goes here...
            </div>
        </div>
        <div id="cell_2">
            Blah blah blah
        </div>
    </div>
</div>

和CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#table {
    width: 100%;
    display: table;
    height: 100%;
}

#row {
    display: table-row;
}

#cell_1, #cell_2 {  
    display: table-cell;
    height: 100%;
}

#cell_1 {
    width: 390px;
    background: aliceblue;
}

#cell_2 {
    background: yellow;
}

#overflown_div {
    height: 100%;
    overflow: scroll; …