Cách tạo <div> lấp đầy <td> chiều cao

Tôi đã xem qua một số bài đăng trên StackOverflow, nhưng không thể tìm thấy câu trả lời cho câu hỏi khá đơn giản này.

Tôi có một cấu trúc HTML như thế này:

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

Những gì tôi cần là divđiền vào chiều cao của td, vì vậy tôi có thể định vị nền của div (biểu tượng) ở góc dưới cùng bên phải của td.

Làm thế nào để bạn đề nghị tôi đi về điều đó?

Nếu bạn cung cấp chiều cao TD của mình là 1px, thì div con sẽ có cha mẹ có chiều cao để tính% từ đó. Bởi vì nội dung của bạn sẽ lớn hơn 1px, td sẽ tự động phát triển, cũng như div. Kinda là một hack rác, nhưng tôi cá là nó sẽ hoạt động.

Chiều cao CSS: 100% chỉ hoạt động nếu phần tử gốc có chiều cao được xác định rõ ràng. Ví dụ: điều này sẽ hoạt động như mong đợi:

td {
    height: 200px;
}

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

Vì có vẻ như <td>chiều cao của bạn sẽ thay đổi, điều gì sẽ xảy ra nếu bạn thêm biểu tượng dưới cùng bên phải với một hình ảnh được định vị hoàn toàn như vậy:

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

Với đánh dấu ô trong bảng như vậy:

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

Chỉnh sửa: sử dụng jQuery để đặt chiều cao của div

Nếu bạn giữ đoạn mã <div>là con của <td>đoạn mã này, đoạn mã jQuery này sẽ đặt đúng chiều cao của nó:

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

Bạn có thể thử tạo div float:

.thatSetsABackgroundWithAnIcon{

    float:left;
}

Ngoài ra, hãy sử dụng khối nội tuyến:

.thatSetsABackgroundWithAnIcon{

    display:inline-block;
}

Ví dụ làm việc của phương pháp khối nội tuyến:

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>

Thực sự phải làm điều này với JS. Đây là một giải pháp. Tôi không sử dụng tên lớp của bạn, nhưng tôi đã gọi div trong tên lớp td là "full-height" :-) Rõ ràng là đã sử dụng jQuery. Lưu ý rằng điều này được gọi từ jQuery (document) .ready (function () {setFullHeights ();}); Cũng lưu ý rằng nếu bạn có hình ảnh, bạn sẽ phải lặp lại chúng trước tiên với những thứ như:

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

}

Và thay vào đó, bạn sẽ muốn gọi loadFullHeights () từ docReady. Đây thực sự là những gì tôi đã sử dụng để đề phòng. Phải suy nghĩ trước bạn biết không!

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');
}

}

Câu hỏi này đã được trả lời ở đây . Chỉ cần đặt height: 100%cả hộp divvà hộp đựng td.

Sửa đổi hình nền của chính <td>.

Hoặc áp dụng một số css cho div:

.thatSetsABackgroundWithAnIcon{
    height:100%;
}