ich würde das mit Flexbox erledigen, zum Beispiel:
* { -moz-box-sizing: border-box; box-sizing: border-box; body { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; } main { flex: 1; -ms-flex: 1 0 auto; /* Für alle IE, muss hinter "flex: 1;" stehen */ }
Ich würde bei der Verwendung von flexbox die Unterstützung von IE10 mit dem Browser-präfix -ms- nicht verwenden, da man hier die alte Syntax berücksichtigen muss und der IE10 nicht sehr viele Nutzer hat.
http://www.browser-statistik.de/statistiken/versionen/
Stattdessen müssten aber Safari und Android mit -webkit- berücksichtigt werden.
LG Matthias
BTW: box-sizing ist mittlerweile Präfixfrei: caniuse: box-sizing