Cara membuat <div> mengisi <td> tinggi

Saya telah melihat beberapa posting di StackOverflow, tetapi belum dapat menemukan jawaban untuk pertanyaan yang agak sederhana ini.

Saya memiliki konstruksi HTML seperti ini:

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

Yang saya butuhkan adalah untuk divmengisi tinggi td, jadi saya bisa memposisikan latar belakang div (ikon) di sudut kanan bawah td.

Bagaimana Anda menyarankan saya melakukan itu?

Jika Anda memberi TD Anda tinggi 1px, maka div turunan akan memiliki orang tua yang ditinggikan untuk menghitung% asalnya. Karena konten Anda akan lebih besar dari 1px, td secara otomatis akan bertambah, seperti halnya div. Agak hack sampah, tapi saya yakin itu akan berhasil.

Tinggi CSS: 100% hanya berfungsi jika induk elemen memiliki tinggi yang ditentukan secara eksplisit. Misalnya, ini akan berfungsi seperti yang diharapkan:

td {
    height: 200px;
}

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

Karena sepertinya Anda <td>akan menjadi tinggi variabel, bagaimana jika Anda menambahkan ikon kanan bawah dengan gambar yang benar-benar diposisikan seperti ini:

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

Dengan markup sel tabel seperti ini:

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

Edit: menggunakan jQuery untuk mengatur ketinggian div

Jika Anda menyimpan <div>sebagai anak dari <td>, cuplikan jQuery ini akan menyetel tingginya dengan benar:

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

Anda dapat mencoba membuat div mengambang:

.thatSetsABackgroundWithAnIcon{

    float:left;
}

Sebagai alternatif, gunakan blok-sebaris:

.thatSetsABackgroundWithAnIcon{

    display:inline-block;
}

Contoh kerja dari metode blok-sebaris:

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>

Benar-benar harus melakukan ini dengan JS. Inilah solusinya. Saya tidak menggunakan nama kelas Anda, tapi saya memanggil div di dalam nama kelas td "full-height" :-) Jelas digunakan jQuery. Perhatikan ini dipanggil dari jQuery (document) .ready (function () {setFullHeights ();}); Perhatikan juga jika Anda memiliki gambar, Anda harus mengulanginya terlebih dahulu dengan sesuatu seperti:

function loadedFullHeights(){
var imgCount = jQuery(".full-height").find("img").length;
if(imgCount===0){
    return setFullHeights();
}
var loaded = 0;
jQuery(".full-height").find("img").load(function(){
    loaded++;
    if(loaded ===imgCount){
        setFullHeights()
    }
});

}

Dan Anda ingin memanggil loadFullHeights () dari docReady sebagai gantinya. Ini sebenarnya yang akhirnya saya gunakan untuk berjaga-jaga. Harus berpikir jauh ke depan lho!

function setFullHeights(){
var par;
var height;
var $ = jQuery;
var heights=[];
var i = 0;
$(".full-height").each(function(){
    par =$(this).parent();
    height = $(par).height();
    var tPad = Number($(par).css('padding-top').replace('px',''));
    var bPad = Number($(par).css('padding-bottom').replace('px',''));
    height -= tPad+bPad;
    heights[i]=height;
    i++;
});
for(ii in heights){
    $(".full-height").eq(ii).css('height', heights[ii]+'px');
}

}

Pertanyaan ini sudah terjawab di sini . Masukkan saja ke height: 100%dalam divdan wadahnya td.

Ubah gambar latar belakang <td> itu sendiri.

Atau terapkan beberapa css ke div:

.thatSetsABackgroundWithAnIcon{
    height:100%;
}