Ich versuche, die mittlere Zelle einer Tabelle mit einem div-Element zu füllen. Um das Problem zu verdeutlichen, ist das div mit einem roten Hintergrund versehen. Es scheint in Chrome zu funktionieren, aber nicht in IE. In der Geige unten setzt IE die Höhe des div auf die minimale Höhe, die notwendig ist, um seinen Inhalt zu enthalten. Als ich mit verschiedenen CSS-Einstellungen an diesem Problem herumgebastelt habe, konnte ich IE dazu bringen, "height: 100%" zu interpretieren; als "die Höhe des Browserfensters". Wie die Frage jedoch sagt, möchte ich IE als die Höhe der td-Zelle interpretieren. Irgendwelche Ideen?
CSS:
%Vor%HTML:
%Vor%Ich habe mehr darüber recherchiert und einige Informationen gesammelt, die für andere, die versuchen, ähnliche Probleme zu lösen, nützlich sein könnten. Die CSS-Spezifikation sagt die folgenden drei Dinge, die ich für wichtig halte:
Zuerst, re: Angabe der Höhe (eines Div) als Prozentsatz:
Der Prozentsatz wird in Bezug auf die Höhe des umschließenden Blocks der generierten Box berechnet. Wenn die Höhe des umschließenden Blocks nicht explizit angegeben wird (d. H. Es hängt von der Höhe des Inhalts ab) und dieses Element nicht absolut positioniert ist, wird der Wert automatisch berechnet.
... Eine Höhe von 'auto' füllt die Zelle nur dann, wenn der Inhalt größer als die minimale Höhe der Zelle ist. Wenn wir jedoch versuchen, die Höhe der enthaltenden Zelle oder Zeile explizit festzulegen, stoßen wir auf das folgende Problem:
CSS 2.1 definiert nicht, wie die Höhe von Tabellenzellen und Tabellenzeilen berechnet wird, wenn ihre Höhe mit Prozentwerten angegeben wird.
Da die Spezifikation es nicht definiert, ist es wohl nicht verwunderlich, dass Chrome und IE es anders berechnen.
Alternativ (wie xec indirekt gezeigt hat) versucht die relative Positionierung zu verwenden, das folgende Spezifikationsproblem:
Die Auswirkung von 'position: relativ' auf Tabellenzeilengruppe, Tabellenkopfgruppe, Tabellenfußgruppe, Tabellenzeile, Tabellenspaltengruppe, Tabellenspalte, Tabellenzelle und Tabelle -caption Elemente ist undefiniert.
www.w3.org/TR/CSS21/visuren.html#propdef-position
Also habe ich festgestellt, dass wahrscheinlich keine pure CSS-Methode zur Lösung des Problems gibt, von der man vernünftigerweise erwarten kann, dass sie in den meisten Browsern funktioniert.
Zuerst dachte ich: "Wow, die CSS-Spezifikation ist ziemlich schlecht und unvollständig, weil sie all diese Dinge undefiniert lassen." Als ich jedoch darüber nachdachte, wurde mir klar, dass es viel komplizierter wäre, die Spezifikationen für diese Probleme zu definieren, als es auf den ersten Blick scheint. Schließlich werden Zeilen- / Zellenhöhen als eine Funktion der Höhen ihres Inhalts berechnet, und ich möchte die Höhe meines Inhalts als Funktion der Zeilen- / Zellenhöhe festlegen. Obwohl ich einen gut definierten, abschließenden Algorithmus habe, wie er in meinem speziellen Fall funktionieren soll, ist es nicht klar, dass der Algorithmus leicht auf alle anderen Fälle verallgemeinert werden könnte, die die Spezifikation abdecken müsste, ohne in Endlosschleifen zu kommen.
Obwohl mir Craigs Antwort gefallen hat und ich den Ansatz in dieser Antwort nicht selbst verwenden werde, bin ich ziemlich weit gekommen mit diesem jsFiddle .
Es beruht jedoch auf einem Hack: height: 1px auf der Tabelle setzen. Es funktioniert in Chrome, FF, IE11 und Edge (alles, was ich getestet habe), aber Chrome beginnt sich in Randfällen schlecht zu benehmen. Sieh die Geige. Hier sind die interessanten Teile:
Zu viel von einem Hack-Geruch für mich.
Legen Sie einfach die Zeilenhöhe des div fest; solange seine Anzeige immer noch ein Block-Level-Element ist. Es gibt keine Notwendigkeit für relative oder absolute Positionierung oder harte Codierung der Höhe auf der div-Ebene oder einer ihrer Eltern. Funktioniert in IE 8+, Firefox und Chrome.
Beispiel:
%Vor%Tags und Links html internet-explorer css