html - 缩小时网页中的空白

我有一个固定的标题，高度为44像素，内容的div为89％，页脚为6％。当我的浏览器100％缩放时，它看起来还不错，而当我缩小时，页脚部分之前会出现一个空白。

我尝试将标题的高度更改为5％，但我们的要求必须是标题应固定为44像素。

题：
是否可以在页脚中包含静态页眉和动态内容？

最佳答案

您可以使用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>