nicht angemeldet
Tabellenhöhe im flex-item bei webkit
Matthias Scharwies
Gunnar Bittersmann
Matthias ApselHallo,
die Tabelle hat im Webkit nicht die volle Höhe wie im Firefox. Das Beispiel jsfiddle. Gibt es dafür eine CSS-Lösung?
-
Servus!
Hallo,
die Tabelle hat im Webkit nicht die volle Höhe wie im Firefox. Das Beispiel jsfiddle. Gibt es dafür eine CSS-Lösung?
Pfüati!
Du brauchst für alle flex-Eigenschaften den Browerpräfix
-webkit-
siehe hier: Wiki: Flexbox
LG Matthias
-
Ein neuer Webkit versteht flex-Eigenschaften ohne Präfix. Die Tabelle wird also auch mit Präfixangaben nicht in der Höhe 100% einnehmen wie es der Firefox macht...
-
Servus!
Ein neuer Webkit versteht flex-Eigenschaften ohne Präfix.
Ah, sorry. Steht auch so im Wiki. Ich würd's für Safari und iOS später trotzdem mit reinnehmen.
Die Tabelle wird also auch mit Präfixangaben nicht in der Höhe 100% einnehmen wie es der Firefox macht...
Normalerweise richten sich die Flex-Elemente nach dem Element mit dem größten Inhalt: Beispiel
Wenn Du
td {height: 100vh;}gibst, ist es zwar doppelt gemoppelt, bringt aber auch im Chrome das gewünschte Ergebnis.
LG Matthias
-
Das Div ist nicht das einzige Element im body, deshalb geht es so nicht. Das überarbeitete Beispiel jsfiddle
-
Ich weiß jetzt nicht genau warum, aber dein
table { outline-offset: -2px; outline: 1px solid blue; height: 100%; }funktioniert wegen des Prozentwerts nicht:
http://stackoverflow.com/questions/5657964/css-why-doesn-t-percentage-height-work
Mit
height: 100vh;geht's auch im Chrome.
-
Wenn man der Tabelle eine Höhe von 100vh gibt, ist sie natürlich höher als das umschlißende Div. So geht es also auch nicht. Ich gehe jetzt davon aus das es Bug in Webkit ist, der vieleicht behoben wird. Und wenn nicht, dan sieht die Tabelle im Webkit halt schlechter aus...
-
Hallo,
irgendwie habe ich in Erinnerung das sich bei height vh und % auf unterschiedliche Elemente beziehen.
In deinem ursprünglichen Beispiel sollte es deshalb ausreichen dem div eine Höhe von 100% zu geben damit die Tabelle auch 100% der (eventuell verbleibenden) Fensterhöhe einnehmen kann.
Sinnvollerweise solltest du auch beim body auf die Einheit vh erzichten, zumal du dir über die Auswirkungen offensichtlich im Klaren bist. Das ist im Endeffekt aber dein Problem.
Gruss
MrMurphy
-
Gut, danke für die Hilfsbereitschaft aber so gehts halt nicht. Denn die Seite hat nun mahl einen Header und der body muss auf 100vh, damit das Div mit flex: 1 die verbleibende Höhe einnimmt. Nur mal so, jsfiddle hat ne update-Funktion. Damit kann man funktionierende Beispiele unter einem neuen Link neu abspeichern.
-
Hallo,
dann werfe ich mal folgende Lösung in den Ring:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt --> <title>Tabellenhöhe mit Flexbox</title> <meta name="description" content="Überschrift mit Hintergrundbild"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Um alte IE HTML5-tauglich zu machen --> <!--[if lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) --> <style> /* Hack für IE 10 und IE 11 */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { html { height: 100%; } } @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css); /*Grundeinstellungen*/ @media all { * { -moz-box-sizing: border-box; box-sizing: border-box; } html { -moz-box-sizing: border-box; box-sizing: border-box; font-size: 100%; } body { height: 100%; min-height: 100vh; padding: 0; border: 2px solid blue; margin: 0; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; } header, nav, main, footer { padding: 0; border: 5px solid silver; margin: 0; } main { display: flex; flex-direction: column; flex: 1; -ms-flex: 1 0 auto; /* Für alle IE, muss hinter "flex: 1;" stehen */ } table { border-collapse: separate; /*Zellzwischenräume (Vorgabe)*/ border-collapse: collapse; /*keine Zell-Zwischenräume*/ border: 5px solid red; display: flex; flex-direction: column; justify-content: center; flex: 1; -ms-flex: 1 0 auto; /* Für alle IE, muss hinter "flex: 1;" stehen */ } th, td { text-align: left; vertical-align: top; padding: 0.3rem 0.7rem; } } </style> </head> <body> <header> <h2>header</h2> </header> <main> <h2>main</h2> <table> <tr> <td>td1</td> </tr> </table> </main> </body> </html>Für den praktischen Einsatz sollten natürlich noch die Prefixe hinzugefügt werden, wobei die von mir kommentierten für den IE hinter "display: flex" stehen bleiben müssen, obwohl das dem sonstigen Vorgehen mit Prefixen widerspricht.
Gruss
MrMurphy
-
O.K. , so hat die Tabelle die Höhe die sie haben soll, jedoch die Elemente in der Tabelle nicht. So sieht es nun aus jsfiddle. Aber trotzdem danke für die Mühe. Also ich denke nun das es mit css einfach nicht geht, was ja die eigendliche Frage war. Womit das Thema für mich gelöst ist :)
-
Hallo
Also ich denke nun das es mit css einfach nicht geht, was ja die eigendliche Frage war.
Natürlich geht es mit CSS. Aber das war nicht der Inhalt deiner eigentlichen Frage, die du hier im Forum gestellt hast. Bislang hast du nur von der Tabellenhöhe geschrieben.
Gruss
MrMurphy
-
-
-
-
-
-
-
-
-
-
@@Matthias Scharwies
Du brauchst für alle flex-Eigenschaften den Browerpräfix […] siehe hier: Wiki: Flexbox
Dafür, was man in aktuellen Browsern an Präfixen braucht, aufs SELFHTML-Wiki zu verweisen ist aber auch sehr optimistisch. Ich denke mal, so gut wie das Wiki auch gepflegt wird, es wird nie so aktuell sein wie Can I use. Das ist die Quelle, auf die zu verweisen ist.
LLAP
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Hallo Gunnar Bittersmann,
Du brauchst für alle flex-Eigenschaften den Browerpräfix […] siehe hier: Wiki: Flexbox
Dafür, was man in aktuellen Browsern an Präfixen braucht, aufs SELFHTML-Wiki zu verweisen ist aber auch sehr optimistisch. Ich denke mal, so gut wie das Wiki auch gepflegt wird, es wird nie so aktuell sein wie Can I use. Das ist die Quelle, auf die zu verweisen ist.
Im Wikiartikel steht aber mehr als bei caniuse. Dies kann für den Adressaten hilfreich sein. Weil wir wissen, dass wir niemals aktueller als caniuse sein können, gibt es bei Eigenschaften, die möglicherweise nicht von allen Browsern unterstützt werden, selbstverständlich einen Link zu caniuse.
Da sich aus dem Eröffnungsbeitrag nur sehr wenig über den Wissensstand des OP ablesen lässt, kann man auch nicht sagen, dass der Link zum Wiki nur einen zusätzlichen Klick darstellt.
Bis demnächst
Matthias--
Signaturen sind bloed (Steel) und Markdown ist mächtig.
-
-