web-dev-qa-db-ja.com

<div>が<td>の高さを埋める方法

ブラウザが変更されたため、この質問の回答には更新が必要です

元の質問

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の高さを満たすために必要なのは、td。

私はそれについてどうやって提案しますか？

htmlcsshtml-table
87
CodeMonkey

TDの高さを1pxにすると、子divには、％を計算するための高さの親があります。コンテンツが1pxよりも大きいため、tdはdiv。Kindaはガベージハックになりますが、うまくいくと思います。

148
psayre23

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());
});
31
Pat

divをfloatにしてみてください：

.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>
5
angryobject

この質問はすでに回答済みです here 。ただheight: 100%divとコンテナtdの両方。

2
Nacho Coloma