缩小时网页中的空白答案

【问题标题】：White spaces in Web a page when zooming out缩小时网页中的空白
【发布时间】：2019-04-16 00:42:54
【问题描述】：

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

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

问题：
是否可以有静态页眉和带页脚的动态内容？

【问题讨论】：

能否提供放大和未放大的图片？我有点明白（在我的脑海里你在说什么），但还不足以提供帮助。
我敢打赌，在除 100% 以外的任何缩放级别时，页面的外观绝对没有任何要求。因为，你猜怎么着？这个缩放功能是浏览器认为对用户有用的东西。此功能不受任何监管，每个浏览器都按照他们认为合适的方式实现了它。作为非标准，它不是必需的，因为您无法控制（或知道）浏览器如何缩放。它高于页面级别 - 在大多数情况下，您甚至无法确定当前的缩放级别。
嗨，板凳，我找到了一种使用正文高度（页眉高度+页脚高度）来获取内容大小的方法。我使用 Jquery 自动调整大小取决于浏览器大小。

标签： html css web bootstrap-4

【解决方案1】：

您可以使用 CSS calc() 函数。

如果您想拥有静态 44 像素的页眉并且您知道页脚应该为 6%，那么只需设置您的内容：100% - 6%（页脚）= 94% - 44 像素（页眉）。

所以使用 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>

【讨论】：

嗨 Roland，谢谢，但我找到了更好的方法，它看起来像这样。 var h = $(window).height(), w = $(window).width(); $(window).resize(function(){ var nh = $(window).height(), nw = $(window).width(); // 比较对应的变量 h = nh; w = nw; / / 更新 h 和 w; });
使用window.resize函数我可以自动设置内容宽度取决于窗口大小和标题和内容之和的差异。