Nach dem Testen verschiedener Szenarien halte ich dies für die beste Lösung:
html {
width: 100%;
height: 100%;
display: table;
}
body {
width: 100%;
display: table-cell;
}
html, body {
margin: 0px;
padding: 0px;
}
Es ist insofern dynamisch, als die htmlund die bodyElemente automatisch erweitert werden, wenn ihr Inhalt überläuft. Ich habe dies in der neuesten Version von Firefox, Chrome und IE 11 getestet.
Sehen Sie sich hier die vollständige Geige an (für Ihre Tischhasser da draußen können Sie sie jederzeit ändern, um ein Div zu verwenden):
https://jsfiddle.net/71yp4rh1/9/
Nachdem dies gesagt wurde, gibt es mehrere Probleme mit den hier veröffentlichten Antworten .
html, body {
height: 100%;
}
Wenn Sie das obige CSS verwenden, werden HTML und Body-Element NICHT automatisch erweitert, wenn ihr Inhalt wie hier gezeigt überläuft:
https://jsfiddle.net/9vyy620m/4/
Beachten Sie beim Scrollen den sich wiederholenden Hintergrund? Dies geschieht, weil die Höhe des Körperelements aufgrund des Überlaufens der untergeordneten Tabelle NICHT zugenommen hat. Warum wird es nicht wie jedes andere Blockelement erweitert? Ich bin mir nicht sicher. Ich denke, Browser behandeln dies falsch.
html {
height: 100%;
}
body {
min-height: 100%;
}
Das Einstellen einer Mindesthöhe von 100% am Körper wie oben gezeigt verursacht andere Probleme. Wenn Sie dies tun, können Sie nicht angeben, dass ein untergeordnetes Div oder eine untergeordnete Tabelle eine prozentuale Höhe einnimmt, wie hier gezeigt:
https://jsfiddle.net/aq74v2v7/4/
Hoffe das hilft jemandem. Ich denke, Browser behandeln dies falsch. Ich würde erwarten, dass sich die Körpergröße automatisch anpasst, wenn die Kinder überlaufen. Dies scheint jedoch nicht zu passieren, wenn Sie 100% Höhe und 100% Breite verwenden.