html - td是什麼 - td height not working

如何使<div>填充<td>高度 (5)

CSS高度：100％僅在元素的父級具有明確定義的高度時起作用。例如，這將按預期工作：

td {
    height: 200px;
}

td div {
    /* div will now take up full 200px of parent's height */
    height: 100%;
}

由於您的<td>看起來像是高度可變的，因此如果您使用絕對定位的圖片添加了右下角的圖標，如下所示：

.thatSetsABackgroundWithAnIcon {
    /* Makes the <div> a coordinate map for the icon */
    position: relative;

    /* Takes the full height of its parent <td>.  For this to work, the <td>
       must have an explicit height set. */
    height: 100%;
}

.thatSetsABackgroundWithAnIcon .theIcon {        
    position: absolute;
    bottom: 0;
    right: 0;
}

使用表格單元格標記如下所示：

<td class="thatSetsABackground">  
  <div class="thatSetsABackgroundWithAnIcon">    
    <dl>
      <dt>yada
      </dt>
      <dd>yada
      </dd>
    </dl>
    <img class="theIcon" src="foo-icon.png" alt="foo!"/>
  </div>
</td>

編輯：使用jQuery來設置div的高度

如果將<div>為<td>的子項，那麼jQuery的這個片段將正確設置其高度：

// Loop through all the div.thatSetsABackgroundWithAnIcon on your page
$('div.thatSetsABackgroundWithAnIcon').each(function(){
    var $div = $(this);

    // Set the div's height to its parent td's height
    $div.height($div.closest('td').height());
});

這個問題的答案需要更新，因為瀏覽器已經改變

原始問題

我已經瀏覽了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右下角。

你如何建議我去做？

你可以試著讓你的div浮動：

.thatSetsABackgroundWithAnIcon{

    float:left;
}

另外，使用內聯塊：

.thatSetsABackgroundWithAnIcon{

    display:inline-block;
}

內聯塊方法的工作示例：

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

<table>
  <tr>
    <td>
      <div style="border:1px solid red; height:100%; display:inline-block;">
        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>

如果你給你的TD一個1px的高度，那麼子div將有一個加權的父親來計算它的％。因為你的內容會大於1px，所以td會自動增長，就像div一樣。有點垃圾破解，但我敢打賭它會奏效。

我的答案可能不是你想要的，但我認為這是你需要你應該使用這種結構：

<table>
    <tr>
        <td class="table-class thatSetsABackground">
            <table border="0" cellpadding="0" cellspacing="0" class="table-class">
            <tr>
                <td class="act-like-your-first-div">
                    //any thing you want
                </td>
                <td class="act-like-your-another-div">
                    //any thing you want
                </td>
            </tr>
            <table>
        </td>  
    </tr>
</table>

和風格一樣

.table-class {
    width: 100%; 
    height: 100%;
    text-align: center;    
}

所以你可以在這樣的任何問題中使用這個解決方案！

這個問題已經here回答here 。只需在div和容器td放置height: 100% 。