相关疑难解决方法(0)

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

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

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

这个问题的答案需要更新,因为浏览器已经改变

原始问题

我已经浏览了StackOverflow上的几篇帖子,但未能找到这个相当简单的问题的答案.

我有一个像这样的HTML结构:

<table>
  <tr>
    <td class="thatSetsABackground">
      <div class="thatSetsABackgroundWithAnIcon">
        <dl>
          <dt>yada
          </dt>
          <dd>yada
          </dd>
        </dl>
      <div>
    </td>
    <td class="thatSetsABackground">
      <div class="thatSetsABackgroundWithAnIcon">
        <dl>
          <dt>yada
          </dt>
          <dd>yada
          </dd>
        </dl>
      <div>
    </td>
  </tr>
</table>

我需要的是div填充的高度td,所以我可以将div的背景(图标)定位在右下角td.

你怎么建议我去那？

如您所知,在Internet Explorer中,当页面上的任何元素调整大小时,会触发window.resize事件.通过分配/更改其高度或样式属性,通过简单地向其添加子元素或其他任何内容来调整页面元素的大小也无关紧要 - 即使元素大小调整不影响视口本身的尺寸.

在我的应用程序中,这导致了一个讨厌的递归,因为在我的window.resize处理程序中我正在调整一些<li>元素,这反过来会重新触发window.resize等.再次,这只是IE中的一个问题.

是否有任何方法可以阻止window.resize在IE中触发以响应正在调整大小的页面上的元素？

我还应该提到我正在使用jQuery.

我正在尝试用div元素填充表格的中心单元格.为了说明问题,div的样式为红色背景.它似乎适用于Chrome,但不适用于IE.在下面的小提琴中,IE将div的高度设置为包含其内容所需的最小高度.通过不同的CSS设置修补这个问题,我设法让IE解释"高度:100%"; 作为"浏览器窗口的高度".但是,正如问题所述,我希望IE将其解释为td单元格的高度.有任何想法吗？

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>