Tabellenhöhe im flex-item bei webkit bearbeitet von MrMurphy1 28.05.2015 11:32 Hallo, dann werfe ich mal folgende Lösung in den Ring: ~~~ html <!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
Tabellenhöhe im flex-item bei webkit bearbeitet von Christian Kruse 28.05.2015 12:46 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
nicht angemeldet
