для того чтобы контейнер занял 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;
}