So lassen Sie <div> die <td> -Höhe füllen

Ich habe mehrere Beiträge zu StackOverflow durchgesehen, konnte jedoch keine Antwort auf diese recht einfache Frage finden.

Ich habe ein HTML-Konstrukt wie folgt:

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

Was ich brauche, ist, dass der divdie Höhe des ausfüllt td, damit ich den Hintergrund des Div (das Symbol) in der unteren rechten Ecke des positionieren kann td.

Wie schlagen Sie vor, dass ich das mache?

Wenn Sie Ihrem TD eine Höhe von 1 Pixel geben, hat der untergeordnete Div einen großen Elternteil, aus dem er den Prozentsatz berechnet. Da Ihr Inhalt größer als 1px wäre, würde der td automatisch wachsen, ebenso wie der div. Ein bisschen ein Müllhack, aber ich wette, es würde funktionieren.

CSS-Höhe: 100% funktioniert nur, wenn das übergeordnete Element eine explizit definierte Höhe hat. Dies würde beispielsweise wie erwartet funktionieren:

td {
    height: 200px;
}

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

Da es so aussieht, als ob Ihre <td>Höhe variabel sein wird, was ist, wenn Sie das Symbol unten rechts mit einem absolut positionierten Bild wie folgt hinzugefügt haben:

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

Mit dem Tabellenzellen-Markup wie folgt:

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

Bearbeiten: Verwenden Sie jQuery, um die Höhe von div festzulegen

Wenn Sie das <div>als Kind von behalten <td>, wird dieser Ausschnitt von jQuery seine Höhe richtig einstellen:

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

Sie könnten versuchen, Ihr Div zum Schweben zu bringen:

.thatSetsABackgroundWithAnIcon{

    float:left;
}

Alternativ können Sie auch Inline-Block verwenden:

.thatSetsABackgroundWithAnIcon{

    display:inline-block;
}

Arbeitsbeispiel der Inline-Block-Methode:

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>

Muss das wirklich mit JS machen. Hier ist eine Lösung. Ich habe Ihre Klassennamen nicht verwendet, aber ich habe das div innerhalb des td-Klassennamens "full-height" aufgerufen :-) Offensichtlich wurde jQuery verwendet. Beachten Sie, dass dies von jQuery (document) .ready (function () {setFullHeights ();}) aufgerufen wurde. Beachten Sie auch, dass Sie, wenn Sie Bilder haben, diese zuerst mit folgenden Schritten durchlaufen müssen:

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

}}

Und Sie möchten stattdessen die loadFullHeights () von docReady aus aufrufen. Dies ist eigentlich das, was ich letztendlich nur für den Fall verwendet habe. Ich muss vorausdenken, weißt du!

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

}}

Diese Frage ist schon beantwortet hier . Einfach height: 100%in den divund den Behälter geben td.

Ändern Sie das Hintergrundbild des <td> selbst.

Oder wenden Sie etwas CSS auf das div an:

.thatSetsABackgroundWithAnIcon{
    height:100%;
}