Опубликовано Оставить комментарий

height 100%

для того чтобы контейнер занял 100% высоты страницы, надо выставить в 100% html и body

html,
body {
  height: 100%;
}

.container {
  height: 100%;
  /* ... */
}

Есть нюанс с border – если в контейнере будет border, например так

.container {
    border: 5px solid #ffcc5c;
}

container станет больше высоты экрана как раз на толщину границы
нужно добавить box-sizing: border-box; (по умолчанию свойство установлено content-box – при расчете браузером свойств width/height – borders and padding не учитываются)

.container {
    border: 5px solid #ffcc5c;
    box-sizing: border-box;
}

Для поддержки старых браузеров

.container {
   -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
   -ms-box-sizing:     border-box;
    box-sizing:        border-box;
}
Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *