Lassen Sie einen DIV eine ganze Tabellenzelle füllen

Ich habe diese Frage gesehen und ein bisschen gegoogelt , aber bisher hat nichts funktioniert. Ich denke, es ist jetzt 2010 (diese Fragen / Antworten sind alt und unbeantwortet) und wir haben CSS3! Gibt es eine Möglichkeit, ein Div dazu zu bringen, die Breite und Höhe einer gesamten Tabellenzelle mithilfe von CSS zu füllen?

Ich weiß nicht, wie breit und / oder hoch die Zelle im Voraus sein wird, und das Einstellen der Breite und Höhe des Divs auf 100% funktioniert nicht.

Der Grund, warum ich das div brauche, ist, dass ich einige Elemente unbedingt außerhalb der Zelle positionieren muss und position: relativenicht für tds gilt, also brauche ich ein Wrapper-div.

Der folgende Code funktioniert mit IE 8, dem IE 7-Kompatibilitätsmodus von IE 8 und Chrome (an keiner anderen Stelle getestet):

<table style="width:100px"> <!-- Not actually necessary; just makes the example text shorter -->
   <tr><td>test</td><td>test</td></tr>
   <tr>
      <td style="padding:0;">
         <div style="height:100%; width:100%; background-color:#abc; position:relative;">
            <img style="left:90px; position:absolute;" src="../Content/Images/attachment.png"/>
            test of really long content that causes the height of the cell to increase dynamically
         </div>
      </td>
      <td>test</td>
   </tr>
</table>

Sie haben in Ihrer ursprünglichen Frage gesagt, dass die Einstellung widthund heightzu 100%nicht funktioniert hat, was mich vermuten lässt, dass es eine andere Regel gibt, die sie überschreibt. Haben Sie den berechneten Stil in Chrome oder Firebug überprüft, um festzustellen, ob die Regeln für Breite und Höhe wirklich angewendet wurden?

Bearbeiten

Wie dumm ich bin! Die divGröße entsprach dem Text, nicht dem td. Sie können dies in Chrome beheben, indem Sie das erstellen div display:inline-block, aber es funktioniert nicht in IE. Das erweist sich als schwieriger ...

div height = 100% in der Tabellenzelle funktioniert nur, wenn die Tabelle selbst das Attribut height hat.

<table border="1" style="height:300px; width: 100px;">
 <tr><td>cell1</td><td>cell2</td></tr>
 <tr>
   <td>
     <div style="height: 100%; width: 100%; background-color:pink;"></div>
   </td>
   <td>long text long text long text long text long text long text</td>
 </tr>
</table>

UPD in FireFox sollten Sie auch den height=100%Wert für das übergeordnete TDElement festlegen

Ich musste eine falsche Höhe auf <tr>und Höhe setzen: erben für<td>s

tr hat height: 1px(es wird sowieso ignoriert)

Dann stellen Sie den td ein height: inherit

Dann setzen Sie das div auf height: 100%

Dies funktionierte bei mir in IE Edge und Chrome:

<table style="width:200px;">
    <tr style="height: 1px;">
        <td style="height: inherit; border: 1px solid #000; width: 100px;">
            <div>
              Something big with multi lines and makes table bigger
            </div>
        </td>
        <td style="height: inherit; border: 1px solid #000; width: 100px;">
            <div style="background-color: red; height: 100%;">
                full-height div
            </div>
        </td>
    </tr>
</table>

Wenn Ihr Grund für den Wunsch nach einem 100% -Div in einer Tabellenzelle darin bestand, dass sich die Hintergrundfarbe bis zur vollen Höhe erstreckt, aber dennoch ein Abstand zwischen den Zellen vorhanden ist, können Sie <td>dem Hintergrund selbst die Hintergrundfarbe geben und das CSS verwenden Randabstandseigenschaft, um den Rand zwischen den Zellen zu erstellen.

Wenn Sie jedoch wirklich ein 100% -Höhen-Div benötigen, müssen Sie, wie andere hier erwähnt haben, dem entweder eine feste Höhe zuweisen <table>oder Javascript verwenden.

Da also jeder seine Lösung veröffentlicht und keine für mich gut war, ist hier meine (getestet auf Chrome & Firefox).

table { height: 1px; }
tr { height: 100%; }
td { height: 100%; }
td > div { height: 100%; }

Geige: https://jsfiddle.net/nh6g5fzv/

Da jeder andere Browser (einschließlich IE 7, 8 und 9) position:relativeeine Tabellenzelle korrekt verarbeitet und nur Firefox einen Fehler macht, sollten Sie am besten einen JavaScript-Shim verwenden. Sie sollten Ihr DOM nicht für einen ausgefallenen Browser ändern müssen. Die Leute benutzen Shims die ganze Zeit, wenn der IE etwas falsch macht und alle anderen Browser es richtig machen.

Hier ist ein Ausschnitt mit dem gesamten kommentierten Code. In meinem Beispiel verwenden JavaScript, HTML und CSS reaktionsschnelle Webdesign-Praktiken, aber Sie müssen nicht, wenn Sie nicht möchten. (Responsive bedeutet, dass es sich an die Breite Ihres Browsers anpasst.)

http://jsfiddle.net/mrbinky3000/MfWuV/33/

Hier ist der Code selbst, aber ohne den Kontext macht er keinen Sinn. Besuchen Sie daher die obige jsfiddle-URL. (Das vollständige Snippet enthält sowohl im CSS als auch im Javascript zahlreiche Kommentare.)

$(function() {
    // FireFox Shim
    if ($.browser.mozilla) {
        $('#test').wrapInner('<div class="ffpad"></div>');
        function ffpad() {
            var $ffpad = $('.ffpad'),
                $parent = $('.ffpad').parent(),
                w, h;
            $ffpad.height(0);
            if ($parent.css('display') == 'table-cell') {               
                h = $parent.outerHeight();
                $ffpad.height(h);
            }
        }
        $(window).on('resize', function() {
            ffpad();
        });
        ffpad();
    }
});

Ich schlage eine Lösung mit vor das experimentelle Flexbox zum Simulieren eines Tabellenlayouts, mit dem das Inhaltselement einer Zelle die übergeordnete Zelle vertikal ausfüllen kann:

Demo

.table{ display:flex; border:2px solid red; }
.table > *{ flex: 1; border:2px solid blue; position:relative; }
.fill{ background:lightgreen; height:100%; position:absolute; left:0; right:0; }

/* Reset */
*{ padding:0; margin:0; }
body{ padding:10px; }

<div class='table'>
  <aside><div class='fill'>Green should be 100% height</div></aside>
  <aside></aside>
  <aside>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus conguet.</p>
  </aside>
</div>

Nach einigen Tagen der Suche fand ich eine mögliche Lösung für dieses Problem.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>

<body style="height:100%">
<!-- for Firefox and Chrome compatibility set height:100% in the containing TABLE, the TR parent and the TD itself. -->
<table width="400" border="1" cellspacing="0" cellpadding="0" style="height:100%;">  
  <tr>
    <td>whatever</td>
    <td>whatever</td>
    <td>whatever</td>
  </tr>
  <tr style="height:100%;">
    <td>whatever dynamic height<br /><br /><br />more content
</td>
    <td>whatever</td>

    <!-- display,background-color and radius properties in TD BELOW could be placed in an <!--[if IE]> commentary If desired.
    This way TD would remain as display:table-cell; in FF and Chrome and would keep working correctly.    
    If you don't place the properties in IE commentary it will still work in FF and Chorme with a TD display:block;

    The Trick for IE is setting the cell to display:block; Setting radius is only an example of whay you may want a DIV 100%height inside a Cell.
    -->

    <td style="height:100%; width:100%; display:block; background-color:#3C3;border-radius: 0px 0px 1em 0px;">

    <div style="width:100%;height:100%;background-color:#3C3;-webkit-border-radius: 0px 0px 0.6em 0px;border-radius: 0px 0px 0.6em 0px;">
    Content inside DIV TAG
    </div>
     </td>
  </tr>
</table>
</body>
</html>

Spanische Sprache: El truco es establecer la Tabla, el TR y el TD a Höhe: 100%. Esto lo hace kompatibel mit FireFox und Chrome. Internet Explorer ignoriert auch den TD-Como-Block. De esta forma Explorer sí toma la altura máxima.

Englische Erklärung: innerhalb der Codekommentare

Wenn <table> <tr> <td> <div>alle height: 100%;festgelegt wurden, füllt das div die dynamische Zellenhöhe in allen Browsern aus.

Ok, niemand hat das erwähnt, also dachte ich mir, ich würde diesen Trick posten:

.tablecell {
    display:table-cell;
}
.tablecell div {
    width:100%;
    height:100%;
    overflow:auto;
}

Überlauf: Auto auf diesem Container Div innerhalb der Zelle macht den Trick für mich. Ohne sie nutzt der div nicht die gesamte Höhe.

Wenn die Tabellenzelle die gewünschte Größe hat, fügen Sie einfach diese CSS-Klasse hinzu und weisen Sie sie Ihrem div zu:

.block {
   height: -webkit-calc(100vh);
   height: -moz-calc(100vh);
   height: calc(100vh);
   width: 100%;
}

Wenn Sie möchten, dass die Tabellenzelle auch das übergeordnete Element ausfüllt, weisen Sie die Klasse auch der Tabellenzelle zu. Ich hoffe, es hilft.

ein bisschen spät zur Party, aber hier ist meine Lösung:

<td style="padding: 0; position: relative;">
   <div style="width: 100%; height: 100%; position: absolute; overflow: auto;">
     AaaaaaaaaaaaaaaaaaBBBBBBBbbbbbbbCCCCCCCCCccccc<br>
     DDDDDDDddddEEEEEEEEdddfffffffffgggggggggggggggggggg
   </div>
</td>

Da ich nicht genug Ruf habe, um einen Kommentar zu veröffentlichen, möchte ich eine vollständige browserübergreifende Lösung hinzufügen, die die Ansätze von @Madeorsk und @ Saadat mit geringfügigen Änderungen kombiniert! (Getestet auf Chrome, Firefox, Safari, IE und Edge ab dem 10.02.2020)

table { height: 1px; }
tr { height: 100%; }
td { height: 100%; }
td > div { 
   height: -webkit-calc(100vh);
   height: -moz-calc(100vh);
   height: calc(100%);
   width: 100%;
    background: pink;  // This will show that it works!
} 

Wenn Sie jedoch wie ich sind, möchten Sie auch die vertikale Ausrichtung steuern. In diesen Fällen verwende ich gerne die Flexbox:

td > div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

Ich denke, dass die beste Lösung die Verwendung von JavaScript wäre.

Ich bin mir jedoch nicht sicher, ob Sie dies tun müssen, um Ihr Problem der Positionierung von Elementen <td>außerhalb der Zelle zu lösen . Dafür könnten Sie so etwas tun:

<div style="position:relative">
    <table>
        <tr>
            <td>
                <div style="position:absolute;bottom:-100px">hello world</div>
            </td>
        </tr>
    </table>
</div>

Natürlich nicht inline, aber mit Klassen und IDs.

Um die Höhe zu erhöhen: 100% Arbeit für das innere Div, müssen Sie eine Höhe für das übergeordnete td festlegen. Für meinen speziellen Fall funktionierte es mit Höhe: 100%. Dadurch wurde die innere Div-Höhe gedehnt, während die anderen Elemente des Tisches nicht zuließen, dass der td zu groß wurde. Sie können natürlich auch andere Werte als 100% verwenden

Wenn Sie auch festlegen möchten, dass die Tabellenzelle eine feste Höhe hat, damit sie nicht aufgrund des Inhalts größer wird (um das innere Div zu scrollen oder den Überlauf zu verbergen), haben Sie keine andere Wahl, als einige js-Tricks auszuführen. Das übergeordnete td muss die angegebene Höhe in einer nicht relativen Einheit (nicht%) haben. Und Sie werden höchstwahrscheinlich keine andere Wahl haben, als diese Höhe mit js zu berechnen. Dies würde auch das Tabellenlayout erfordern: fester Stil für das Tabellenelement

Ich stoße häufig auf ähnliche Probleme und verwende sie immer nur table-layout: fixed;für das tableElement und height: 100%;das innere Div.

Ich habe letztendlich nichts gefunden, was in allen meinen Browsern und allen DocTypes / Browser-Rendering-Modi funktionieren würde, außer bei der Verwendung von jQuery. Also hier ist, was ich mir ausgedacht habe.
Es wird sogar der Zeilenumfang berücksichtigt.

function InitDivHeights() {
    var spacing = 10; // <-- Tune this value to match your tr/td spacing and padding.
    var rows = $('#MyTable tr');
    var heights = [];
    for (var i = 0; i < rows.length; i++)
        heights[i] = $(rows[i]).height();
    for (var i = 0; i < rows.length; i++) {
        var row = $(rows[i]);
        var cells = $('td', row);
        for (var j = 0; j < cells.length; j++) {
            var cell = $(cells[j]);
            var rowspan = cell.attr('rowspan') || 1;
            var newHeight = 0;
            for (var k = 0; (k < rowspan && i + k < heights.length); k++)
                newHeight += heights[i + k];
            $('div', cell).height(newHeight - spacing);
        }
    }
}
$(document).ready(InitDivHeights);

Getestet in IE11 (Edge-Modus), FF42, Chrome44 +. Nicht mit verschachtelten Tabellen getestet.

Sie können es so machen:

<td>
  <div style="width: 100%; position: relative; float: left;">inner div</div>
</td>

Wenn das positionierte Element und sein Vaterelement keine Breite und Höhe haben, setzen Sie

padding: 0;

in seinem Vaterelement,

Dies wird wahrscheinlich nicht empfohlen.

Ich habe eine Problemumgehung gefunden, die funktioniert, wenn Ihr div keinen Text enthält und einen einheitlichen Hintergrund hat.

display: 'list-item'

gibt dem div die gewünschte Höhe und Breite, aber mit dem großen Nachteil, ein Listenelement-Aufzählungszeichen zu haben. Da das Div eine homogene Hintergrundfarbe hat, habe ich die Kugel mit diesen Stilen losgeworden:

list-style-position: 'inside',
color: *background-color*,

Ich bin mir nicht sicher, was Sie tun möchten, aber Sie könnten dies versuchen:

<td width="661" valign="top"><div>Content for New Div Tag Goes Here</div></td>

Folgendes sollte funktionieren. Sie müssen eine Höhe für die übergeordnete Zelle festlegen. https://jsfiddle.net/nrvd3vgd/

<table style="width:200px; border: 1px solid #000;">
    <tr>
        <td style="height:100px;"></td>
    </tr>
    <tr>
        <td style="height:200px;">
            <div style="height:100%; background: #f00;"></div>
        </td>
    </tr>
</table>

Versuche dies:

<td style="position:relative;">
    <div style="position:absolute;top:0;bottom:0;width:100%;"></div>
</td>

Versuchen Sie, display: table block in eine Zelle zu setzen

Ich sehe hier keinen alten CSS-Trick für < div > innerhalb von < td >. Deshalb erinnere mich: einfach eingestellt einigen minimalen Wert für Breite , aber what-you-need für min-width . Beispielsweise:

<div style="width: 3px; min-width: 99%;">

Die Breite des td liegt in diesem Fall bei Ihnen.

Dies ist meine Lösung zum Erweitern von 100% Höhe und 100% Breite in einem HTML <td>

Wenn Sie die erste Zeile in Ihrem Code löschen, können Sie dies beheben ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Da dieser Doctype in einigen Dateien nicht zulässt, dass 100% innerhalb von verwendet <td>werden. Wenn Sie diese Zeile jedoch löschen, kann der Körper den Hintergrund nicht auf 100% Höhe und 100% Breite erweitern. Daher habe ich dies gefunden DOCTYPE, das das Problem löst

<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

Mit diesem DOCTYPE können Sie den Hintergrund in Ihrem Körper als 100% Höhe und 100% Breite erweitern und alle 100% Höhe und 100% Breite in den Körper aufnehmen <td>