Пробелы в веб-странице при уменьшении

Question

У меня фиксированный заголовок с высотой 44 пикселя, контент с 89% делением и нижний колонтитул 6%.Когда мой браузер имеет 100% -ое увеличение, оно выглядит нормально, а когда я уменьшаю, перед разделом нижнего колонтитула появляются пробелы.

Я пытаюсь изменить высоту заголовка до 5%, но наши требования должны быть заголовкомдолжно быть зафиксировано до 44 пикселей.

Вопрос:Можно ли иметь нижний колонтитул и динамический контент в нижнем колонтитуле?

Answer 1

Вы можете использовать функцию CSS calc ().

Если вы хотите иметь статический заголовок 44px и знаете, что нижний колонтитул должен быть 6%, тогда просто установите свой контент: 100% - 6% (нижний колонтитул)= 94% - 44px (заголовок).

Таким образом, используя calc ():

content {
  width: calc(94% - 44px);
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  padding:0;
}

header {
  height: 44px;
  width: 100%;
  background: red;
}

main {
  height: calc(94% - 44px);
  background: yellow;
}

footer {
  height: 6%;
  background: green;
}

<header></header>
<main></main>
<footer></footer>