วิธีสร้าง <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ดังนั้นฉันจึงสามารถจัดตำแหน่งพื้นหลังของ div (ไอคอน) ที่มุมล่างขวาของไฟล์td.

คุณจะแนะนำให้ฉันทำอย่างไร

ถ้าคุณให้ TD ของคุณมีความสูง 1px div ลูกจะมีพาเรนต์ที่มีความสูงเพื่อคำนวณเป็น% เนื่องจากเนื้อหาของคุณจะมีขนาดใหญ่กว่า 1px td จะเติบโตโดยอัตโนมัติเช่นเดียวกับ div เป็นการแฮ็กขยะ แต่ฉันพนันได้เลยว่ามันจะได้ผล

ความสูง 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());
});

คุณสามารถลองสร้าง 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>

ต้องทำแบบนี้กับ JS จริงๆ นี่คือวิธีแก้ปัญหา ฉันไม่ได้ใช้ชื่อชั้นเรียนของคุณ แต่ฉันเรียก div ภายในชื่อคลาส td ของ "full-height" :-) ใช้ jQuery ชัด ๆ โปรดทราบว่าสิ่งนี้ถูกเรียกจาก jQuery (document) .ready (function () {setFullHeights ();}); นอกจากนี้โปรดทราบว่าคุณมีภาพหรือไม่คุณจะต้องวนซ้ำก่อนด้วยสิ่งต่างๆเช่น:

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

}

และคุณต้องการเรียก loadedFullHeights () จาก docReady แทน นี่คือสิ่งที่ฉันใช้ในกรณีนี้ ต้องคิดล่วงหน้ารู้!

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

}

คำถามนี้เป็นคำตอบอยู่แล้วนี่ เพียงแค่ใส่height: 100%ทั้งในและภาชนะdivtd

แก้ไขภาพพื้นหลังของ <td> เอง

หรือใช้ css กับ div:

.thatSetsABackgroundWithAnIcon{
    height:100%;
}