html - 缩小时 Web 页面中的空白

Question

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

我尝试将标题的高度更改为 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>