Как растянуть div, чтобы он подвинул другие div до границ окна?

Question

[Drovosek01]

Пробую "натягивать" верстку на wordpress. Разбил одну страницу на несколько.
https://paulderden.000webhostapp.com/contacts/

Хотелось бы, чтобы внизу не было белого пространства, а блок с контактами занимал оставшееся пространство по центру.

Пробовал этому блоку (class="contacts") задавать height: auto и 100% и т.д.

Предполагаю, что у него придётся убрать padding, поставить

display: flex;
justify-content: space-between

Но как сделать, чтобы блок с контактами "раздвинул" header и footer до краев окна?

Answer 1

[AngReload]

html, body {
  height: 100%;
}
body {
  display: table;
  width: 100%;
}
#contacts {
  display: table-row;
  height: 100%;
}
#contacts > .container {
  display: table-cell;
  vertical-align: middle;
}

Comments

[Drovosek01]

Спасибо, сработало.
А полосу прокрутки как-то можно убрать?
Точнее, чтобы блоки не выходили за границы окна допуская, тем самым появление полосы прокрутки.

[AngReload]

Drovosek01, я предположу взаимосвязь полосы прокрутки и тулбара с надписью «Привет, админ».

Answer 2

[siarheisiarhei]

с начала сервер найди...

Comments

[Drovosek01]

Сервер то тут причём?