После тестирования различных сценариев, я считаю, что это лучшее решение:
html {
width: 100%;
height: 100%;
display: table;
}
body {
width: 100%;
display: table-cell;
}
html, body {
margin: 0px;
padding: 0px;
}
Это динамично в том, что htmlиbody элементы будут расширяться автоматически , если их переполнения содержимого. Я проверил это в последней версии Firefox, Chrome и IE 11.
Смотрите полную скрипку здесь (для вас ненавидят за столом, вы всегда можете изменить его, чтобы использовать div):
https://jsfiddle.net/71yp4rh1/9/
При этом, есть несколько вопросов с ответами, размещенными здесь .
html, body {
height: 100%;
}
Использование вышеуказанного CSS приведет к автоматическому расширению html и элемента body, если их содержимое переполнится, как показано здесь:
https://jsfiddle.net/9vyy620m/4/
Как прокручиваете, замечаете повторяющийся фон? Это происходит потому, что высота элемента body НЕ увеличилась из-за переполнения дочерней таблицы. Почему он не расширяется как любой другой элемент блока? Я не уверен. Я думаю, что браузеры обрабатывают это неправильно.
html {
height: 100%;
}
body {
min-height: 100%;
}
Установка минимальной высоты тела на 100%, как показано выше, вызывает другие проблемы. Если вы сделаете это, вы не сможете указать, что дочерний элемент div или таблица занимают процентную высоту, как показано здесь:
https://jsfiddle.net/aq74v2v7/4/
Надеюсь, это кому-нибудь поможет. Я думаю, что браузеры обрабатывают это неправильно. Я ожидал бы, что рост тела автоматически отрегулируется, увеличиваясь, если его дети переполняются. Однако этого не происходит, когда вы используете 100% высоты и 100% ширины.