Jak sprawić, by wysokość <div> wypełniła <td>


102

Przejrzałem kilka postów w StackOverflow, ale nie byłem w stanie znaleźć odpowiedzi na to dość proste pytanie.

Mam taką konstrukcję 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>

Potrzebuję tego, divaby wypełnił wysokość elementu tddiv, aby móc ustawić tło elementu div (ikonę) w prawym dolnym rogu td.

Jak sugerujesz, żebym to zrobił?


Odpowiedzi:


185

Jeśli nadasz swojemu TD wysokość 1px, wtedy element podrzędny div będzie miał podwyższonego rodzica, aby obliczyć jego% z. Ponieważ zawartość byłaby większa niż 1px, td automatycznie wzrosłoby, podobnie jak div. Coś w rodzaju garbage hack, ale założę się, że to zadziała.


7
Chociaż wydaje się, że działa dobrze w webkicie, IE9 całkowicie się psuje.
Daniel Imms,

Pracuj dla mnie w IE11 tylko wtedy, gdy ustawię również div na inline-block. Dzięki!
Danny C

6
Oto rozwiązanie, które działa również w przeglądarce Firefox: stackoverflow.com/questions/36575846/ ...
Wouter

Aby to działało zarówno w Firefoksie, jak iw Chrome musiałem użyć min-height: 1px;zamiastheight: 1px;
Matt Leonowicz

🤯 Nie jestem pewien, czy lubię CSS, czy go nienawidzę
noob

35

Wysokość CSS: 100% działa tylko wtedy, gdy element nadrzędny elementu ma wyraźnie określoną wysokość. Na przykład zadziała to zgodnie z oczekiwaniami:

td {
    height: 200px;
}

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

Ponieważ wydaje się, że twój <td>będzie miał zmienną wysokość, co by było, gdybyś dodał prawą dolną ikonę z absolutnie pozycjonowanym obrazem, takim jak:

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

Z takimi znacznikami komórek tabeli:

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

Edycja: użycie jQuery do ustawienia wysokości div

Jeśli zachowasz <div>jako dziecko <td>, ten fragment kodu jQuery odpowiednio ustawi jego wysokość:

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

To może zadziałać. Skontaktuję się z tobą, kiedy będę próbował. Przeczytałem na ten temat i zrozumiałem, że <div> potrzebuje określonej wysokości, aby móc skalować do 100%. Z tego, co przeczytałem, można to zrobić z jQuery, ponieważ może to dla mnie obliczyć.

2
Nie działałem zbyt dobrze i zdecydowaliśmy się na inne podejście. Ale przyjmuję twoją odpowiedź, ponieważ jest najlepsza w okolicy.

3
Hah, gdybym tylko miał dolara za to, ile razy CSS zmusił mnie do zmiany podejścia :)
Pat

5
Czy tylko ja uważam, że „wysokość CSS: 100% działa tylko wtedy, gdy rodzic elementu ma wyraźnie określoną wysokość” to naprawdę głupia zasada? Przeglądarka i tak określa wysokość elementu nadrzędnego; nie ma sposobu, abyś musiał jawnie ustawić wysokość elementu nadrzędnego.
Jez

1
rozwiązanie jquery działało jednak tylko wtedy, gdy umieściłem je na końcu pliku, dzięki
luke_mclachlan

4

Możesz spróbować ustawić zmienną div:

.thatSetsABackgroundWithAnIcon{

    float:left;
}

Alternatywnie, użyj inline-block:

.thatSetsABackgroundWithAnIcon{

    display:inline-block;
}

Roboczy przykład metody 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>


Wydaje się, że sugestia float: left nie działa. Tę odpowiedź można poprawić, usuwając ją, ponieważ wydaje się, że drugie z wymienionych rozwiązań działa.
Wouter

1
Nie działa z Firefoksem. Wydaje się, że działa tylko z Chrome.
YLombardi

8
Ten fragment kodu również nie działa w Chromium, przynajmniej obecnie (używam 63.0.3239.84).
Michael,

0

Naprawdę muszę to zrobić z JS. Oto rozwiązanie. Nie użyłem nazw twoich klas, ale nazwałem div w nazwie klasy td „pełnej wysokości” :-) Oczywiście użyłem jQuery. Zauważ, że zostało to wywołane z jQuery (dokument) .ready (function () {setFullHeights ();}); Zwróć też uwagę, że jeśli masz obrazy, będziesz musiał najpierw je iterować, używając czegoś takiego:

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

}

Zamiast tego chciałbyś wywołać metodę loadFullHeights () z docReady. Właśnie tego użyłem na wszelki wypadek. Musisz myśleć z wyprzedzeniem, wiesz!

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

}


0

Odpowiedzi na te pytania są już tutaj . Wystarczy włożyć height: 100%zarówno divdo pojemnika, jak i do pojemnika td.


-4

Zmodyfikuj obraz tła samego <td>.

Lub zastosuj css do div:

.thatSetsABackgroundWithAnIcon{
    height:100%;
}

jak piszę w kodzie. TD ma już obraz tła ustawiony za pomocą klasy. Więc ta opcja nie jest możliwa. Próbowałem ustawić wysokość div na 100%, ale to nie działa. Po prostu zawija się do zmiennej wysokości zawartego <dl>. Potrzebne jest więc coś, aby div „zrozumiał”, że powinien wypełniać wysokość. A wysokość: 100% tego nie robi. (przynajmniej nie sam)
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.