Я собрал очень простую страницу, используя основной гибкий контейнер, чтобы нижний колонтитул оставался внизу страницы. Он отлично работает в основных браузерах, кроме IE11.
В IE, хотя изначально и работает, если содержимое внутри должно быть перенесено, вычисленный размер flexbox не корректируется. Я попытался установить минимальную высоту, различную основу гибкости, варианты увеличения / уменьшения гибкости, префиксы. Кажется, ничего не работает.
Здесь вы можете увидеть, как он корректно корректируется до того, как порт представления станет достаточно маленьким для переноса содержимого:
И вот что происходит, когда страница меньше:
Я не уверен, что еще я могу попытаться получить IE полностью
Вот код html, который я тестирую с
<!doctype html>
<html lang="en">
<head>
<style>
html, body {
height: 100%;
}
</style>
</head>
<body>
<div style="display: flex; flex-direction: column; height: 100%">
<div style="flex: 1 1 auto">
<h1>This is a long test message to test the wrapping</h1>
<h1>This is a long test message to test the wrapping</h1>
<h1>This is a long test message to test the wrapping</h1>
<h1>This is a long test message to test the wrapping</h1>
<h1>This is a long test message to test the wrapping</h1>
<h1>This is a long test message to test the wrapping</h1>
<h1>This is a long test message to test the wrapping</h1>
<h1>This is a long test message to test the wrapping</h1>
<h1>This is a long test message to test the wrapping</h1>
<h1>This is a long test message to test the wrapping</h1>
<h1>This is a long test message to test the wrapping</h1>
<h1>This is a long test message to test the wrapping</h1>
<h1>This is a long test message to test the wrapping</h1>
<h1>This is a long test message to test the wrapping</h1>
</div>
<footer style="text-align: right; flex: 0 0 auto; border-top: 1px solid grey;">
<h4>Footer Content<h4>
</footer>
</div>
</body>
</html>