如何使div填充整个表单元格？ [英] How do I make a div fill an entire table cell?

问题描述

我试图用div元素填充表格的中心单元格。为了说明问题的目的，div用红色背景样式。它似乎工作在Chrome，但不是IE。在下面的小提琴中，IE将div的高度设置为包含其内容所需的最小高度。在使用不同的CSS设置修复这个问题，我设法得到IE解释height：100％;作为浏览器窗口的高度。然而，作为问题状态，我想IE将其解释为td单元格的高度。任何想法？

I'm trying to fill the center cell of a table with a div element. For the purposes of illustrating the problem, the div is styled with a red background. It seems to work in Chrome, but not IE. In the fiddle below, IE is setting the height of the div to the minimum height necessary to contain its content. In tinkering around with this problem with different CSS settings, I managed to get IE to interpret "height: 100%"; as "the height of the browser window". However, as the question states, I want IE to interpret it as the height of the td cell. Any ideas?

http://jsfiddle.net/UBk79/

CSS：

*{
    padding: 0px;
    margin: 0px;
}
html, body{
    height: 100%;
}
#container{
    height:100%;
    width: 100%;
    border-collapse:collapse;
}
#centerCell{
    border: 1px solid black;
}
#main{
    height: 100%;
    background-color: red;
}

HTML：

<table id="container">
  <tr id="topRow" height="1px">
    <td id="headerCell" colspan="3">
      TOP
    </td>
  </tr>
  <tr id="middleRow">
    <td id="leftCell" width="1px">
      LEFT
    </td>
    <td id="centerCell">
      <div id="main">CENTER</div>
    </td>
    <td id="rightCell" width="1px">
      RIGHT
    </td>
  </tr>
  <tr id="bottomRow" height="1px">
    <td id="footerCell" colspan="3">
      BOTTOM
    </td>
  </tr>
</table>

推荐答案

我做了一些研究，收集了一些信息这可能会派上用场的人试图解决类似的问题。 CSS规范说，我认为以下三个重要的事情：

I did some more research on this and collected some info that might come in handy to others trying to solve similar problems. The CSS spec says the following three things that I think are important:

首先，re：将div的高度指定为百分比：

First, re: specifying the height (of a div) as a percentage:

百分比是相对于生成的框的包含块的高度计算的。如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素不是绝对定位的，则该值计算为auto。

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

http://www.w3.org/ TR / CSS21 / visudet.html＃the-height-property

...高度为auto不会填充单元格，除非内容比单元格的最小高度高。但是如果我们尝试显式设置包含单元格或行的高度，那么我们遇到以下问题：

... a height of 'auto' won't fill the cell unless the content is taller than the cell's minimum height. But if we try to explicitly set the height of the containing cell or row, then we run into the following problem:

定义如何使用百分比值指定表格单元格和表格行的高度。

CSS 2.1 does not define how the height of table cells and table rows is calculated when their height is specified using percentage values.

http://www.w3.org/TR/CSS21/tables.html#height-layout

由于规范没有定义它，我想这并不奇怪，Chrome和IE选择以不同的方式计算。

Since the spec doesn't define it, I guess it's not too surprising that Chrome and IE choose to calculate it differently.

或者，（如xec间接指出）尝试使用相对定位有以下规范问题：

Alternatively, (as xec indirectly pointed out) trying to use relative positioning has the following spec problem:

相对'on table-row-group，table-header-group，table-footer-group，table-row，table-column-group，table-column，table-cell和table-caption元素未定义。

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

www.w3.org/TR/CSS21/visuren.html#propdef-position

www.w3.org/TR/CSS21/visuren.html#propdef-position

因此，我结束了可能没有一个纯CSS方法来解决可以合理期望在大多数浏览器上工作的问题。

首先，我想，哇，CSS规范是相当劣质和不完整的离开所有这些东西未定义。正如我更多地想到的那样，我意识到，为这些问题定义规范将比起初出现的复杂得多。毕竟，行/单元格高度是根据它们的内容的高度计算的，我想让我的内容的高度是行/单元格高度的函数。即使我有一个明确定义的终止算法，我希望它在我的具体情况下工作，但不清楚该算法将很容易推广到规范将需要覆盖而不进入无限循环的所有其他情况。

At first, I thought, "Wow, the CSS spec is pretty shoddy and incomplete for leaving all this stuff undefined." As I thought about it more, though, I realized that defining the spec for these issues would a lot more complicated than it appears at first. After all, row/cell heights are calculated as a function of the heights of their content, and I want to make the height of my content a function of the row/cell height. Even though I have a well-defined, terminating algorithm for how I want it to work in my specific case, it's not clear that the algorithm would easily generalize to all the other cases that the spec would need to cover without getting into infinite loops.

这篇关于如何使div填充整个表单元格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！