使用CSS将一个或两个div拉伸到整个td

Question

我有servlet生成的HTML，它有一个表和一个或两个div，具体取决于配置。下面是一个快速示例：

table {
    table-layout: fixed;
}
td.td-div {
    width: 80%;
}
td.td-text {
    background-color: #faf0ff;
    width: 20%;
}
div#outer {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    background: #f0fffa;
    display: inline-block;
}
div.div-first, div.div-second {
    background-color: #ccc;
    margin: .1em 0 .1em 0;
    padding: 0;
    width: 100%;
}

<table>
    <tr>
        <td class="td-div">
            <div id="outer">
                <div class="div-first">first div</div>
                <div class="div-second">Second div</div>
            </div>
        </td>
        <td class="td-text">It's just a text to fill this empty space. It's just a text to fill this empty space. It's just a text to fill this empty space.</td>
    </tr>
</table>

问题是，我需要div来填充整个td，不管是只有一个还是两个。是否有可能传播第一和第二div，（或者只是伸展第一div，如果没有第二）到只有CSS的单元格？

更新：我需要这些div（“第一div”和“第二div”）是100%的单元格宽度，当两个单元格都有时，是50%的单元格高度，当只有一个单元格时，是100%的高度。

更新：div的数量可以是动态的。

Answer 1

<script>
function spanHeight(selectors, parents) {
  var $parents, $selectors;

  $parents = $(parents);
  $selectors = $parents.find(selectors);

  $selectors.css({
    height: (100 / $selectors.length + '%')
  });
}

spanHeight('.inner', '#outer');
</script>

table {
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid red;
}
.td-div {
  width: 80%;
  position: relative;
  vertical-align: top;
}
.td-text {
  background: yellow;
  width: 20%;
}
#outer {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top;
  0;
  bottom: 0;
}
.div-first,
.div-second {
  background: aqua;
}
.div-second {
  background: teal;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="td-div">
      <div id="outer">
        <div class="inner div-first">
          first div
        </div>
      </div>
    </td>
    <td class="td-text">
      It's just a text to fill this empty space. It's just a text to fill this empty space. It's just a text to fill this empty space. It's just a text to fill this empty space. It's just a text to fill this empty space. It's just a text to fill this empty
      space. It's just a text to fill this empty space. It's just a text to fill this empty space. It's just a text to fill this empty space. It's just a text to fill this empty space. It's just a text to fill this empty space. It's just a text to fill
      this empty space. It's just a text to fill this empty space. It's just a text to fill this empty space.
    </td>
  </tr>
  </table

Answer 2

如果您可以在项目中使用flexbox，您可能可以执行以下操作：

CSS

td.td-div
{
    width: 80%;
    position:relative; /*added*/
}

div#outer
{
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    background: #f0fffa;
    display: flex; /*added*/
    flex-direction:column; /*added*/
    position:absolute; /*added*/
    top:0; /*added*/
}
div.div-first,
div.div-second
{
    background-color: #ccc;
    margin: .1em 0 .1em 0;
    padding: 0;
    width: 100%;
    height:100%; /*added*/
}

看看这个小提琴的演示。删除div秒并点击Run in the Fiddle，您将看到第一个div将占据整个td，或者添加第三个div，并看到它均匀地填满整个空间。

更新

要为旧浏览器（看看IE）实现一些功能，可以使用javascript，如（jQuery）：

$(function(){
    var h =  $('table').height() / $('div#outer').children().length;
    $('div#outer > div').height(h);
});

Answer 3

该解决方案结合使用CSSdisplay:table和display:table row，还需要在容器

JsFiddle演示

table {
    table-layout: fixed;
    border-collapse: collapse;
    border: 1px solid red;
    width: 100%;
    height: 100%;
}
.td-div {
    width: 80%;
}
.td-text {
    background: yellow;
    width: 20%;
}
#outer {
    display: table;
    width: 100%;
    height: 100%;
}
.div-first, .div-second {
    display: table-row;
    background: aqua;
}
.div-second {
    background: teal;
}

<table>
    <tr>
        <td class="td-div">
            <div id="outer">
                <div class="div-first">first div</div>
                <div class="div-second">Second div</div>
            </div>
        </td>
        <td class="td-text">It's just a text to fill this empty space. It's just a text to fill this empty space. It's just a text to fill this empty space.</td>
    </tr>
</table>

<br/>

<table>
    <tr>
        <td class="td-div">
            <div id="outer">
                <div class="div-first">only div</div>
            </div>
        </td>
        <td class="td-text">It's just a text to fill this empty space. It's just a text to fill this empty space. It's just a text to fill this empty space.</td>
    </tr>
</table>