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，无论是否只有一个或两个。有没有可能只用CSS传播第一个和第二个div（或者只是将第一个div拉伸，如果没有第二个）？

更新：我需要这些div（“first div”和“second div”）为100％单元格宽度，并且当两者都有时，需要50％的单元格高度，以及只有一个时，100％的高度。

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

Answer 1

该解决方案使用CSS display:table和display:table-row的组合，还需要在容器height:100% 上设置 <table>。

<强> JsFiddle Demo

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>

编辑：以上解决方案似乎无法在IE上正常运行，这里是jQuery的后备。

$('table').each(function() { var h = $(this).height(); $('#outer', this).css('height', h); });

<强> Updated JsFiddle

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*/
}

有关演示，请参阅此Fiddle。移除div-second并点击小提琴中的Run，您将看到第一个div将占据整个td，或者添加第三个div并看到它均匀地填满整个空间。

<强>更新

为了实现旧浏览器的某些功能（看着你的IE）你可以使用javascript，就像这样（jQuery）：

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

Answer 3

＆＃13;

<script>
function spanHeight(selectors, parents) {
  var $parents, $selectors;

  $parents = $(parents);
  $selectors = $parents.find(selectors);

  $selectors.css({
    height: (100 / $selectors.length + '%')
  });
}

spanHeight('.inner', '#outer');
</script>

＆＃13;

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

＆＃13;

<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

＆＃13;

Answer 4

试试这个：

div#container {
    padding:20px;
    background:#F1F1F1
}
.content {
    width:150px;
    background:#ddd;
    padding:10px;
    display:table-cell;
    vertical-align:top;
}
.text {
    font-family: 12px Tahoma, Geneva, sans-serif;
    color:#555;
}

另外：http://jsfiddle.net/atk71stg/1/ 在小提琴中，您可能需要将分隔线拉到左侧以调整窗口大小以使所有内容都正确显示。

这使用'flex'显示样式。我不确定这是不是你正在寻找的，但它可能是。

以下是有关flex展示样式的更多信息： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

使用CSS

4 个答案: