Ich habe seit 3 Tagen versucht, zu vermeiden, den Tisch in meinem neuen responsiven Design zu verwenden, meistens weil jeder sagt, dass sie böse sind. Auf der anderen Seite, während man mehr über SEO und Tabellen recherchiert, sagen einige Leute sogar, dass es ihre Sichtbarkeit verbessert.IE 10 Fehler mit Anzeigetabelle CSS, wenn Höhe 100% ist?
In jedem Fall ist die Semantik mit divs und HTML5 viel schöner, also würde ich dieses folgende Beispiel wirklich gerne haben. Das Hauptproblem ist, dass in IE9 & 10 die "Abschnittszeile" wegen des Wertes "Höhe 100%" überläuft. Alle anderen Browser scheinen gut zu reagieren.
Wer weiß, wie diese zu lösen (im Idealfall ohne Javascript?):
JSFiddle: http://jsfiddle.net/fvqvdske/1/
Fullsize-Seite in IE10 Emulationsmodus zu testen: http://jsfiddle.net/fvqvdske/1/show
Das einzige Problem ist der Überlauf und IE9, 10 - die mittlere Zeile muss den gesamten Platz füllen, der von der Kopf- und Fußzeile übrig ist (und die Kopf- und Fußzeile muss in der Lage sein, die Höhe dynamisch an ihren Inhalt anzupassen, zB n o feste, keine absoluten Positionen).
HTML
<body>
<header role="banner">
<div>
<div>
This is the top banner
</div>
</div>
</header>
<section role="main">
<div>
<div>
<div>
<div>
<div style="border: 2px solid red;">
This is the content<br/>
This is the content<br/>
This is the content<br/>
This is the content<br/>
This is the content<br/>
</div>
</div>
</div>
</div>
</div>
</section>
<footer role="contentinfo">
<div>
<div>
This is the footer
</div>
</div>
</footer>
</body>
CSS
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
width: 100%;
display: table;
position: absolute;
border-spacing: 0;
border-collapse: collapse;
}
header, footer, section {
display: table-row;
text-align: center;
vertical-align: middle;
height: 1px;
}
header > div, section > div, footer > div {
display: table-cell;
vertical-align: middle;
}
header > div > div,
section > div > div,
section > div > div > div,
footer > div > div {
max-width: 400px;
width: 100%;
margin: auto;
background-color: brown;
}
section,
section > div,
section > div > div,
section > div > div > div,
section > div > div > div > div {
box-shadow: inset 0 1em 1em -1em #222, inset 0 -1em 1em -1em #222;
height: 100%;
vertical-align: middle;
}
section > div {
display: table-cell;
width: 100%;
height: 100%;
}
section > div > div {
display: table;
margin: auto;
}
section > div > div > div {
display: table-row;
}
section > div > div > div > div {
display: table-cell;
}
section {
}
/* temp */
header {
background-color: pink;
}
section {
background-color: yellow;
}
footer {
background-color: orange;
}
Sein ein hässlicher Fehler haben Sie flex Box versucht, mit? 'display: flex;' http://jsfiddle.net/GXe9m/2/ – jagmitg
Flexbox wird nicht genug für mein Projekt unterstützt: http://caniuse.com/#search=flexbox - Sind Sie sicher, dass dies ein Fehler ist .. Nichts, was wir tun können, um es zu umgehen? Ich habe ein kleines Update gemacht, um mein CSS zu säubern und es leichter zu machen, es zu befolgen. –
Persönlich, wenn ich display: table, table-row und table-cell verwenden müsste, dann würde ich tatsächliche HTML-Tabellen verwenden. Das scheint mir verwirrend. Noch nie von dem SEO-Argument gehört. Haben Sie einen Link mit mehr Infos dazu? –