html - 尽管有 % 宽度和高度，但在浏览器调整大小时缺少内容

Question

我目前面临着调整浏览器大小的问题。当页面为全尺寸时(即浏览器窗口未最小化)，页面运行良好，产生以下内容:

但是，当我最小化窗口，通过垂直压缩使其变小时，会发生这种情况:

内容被截断，我无法在调整大小的浏览器窗口中滚动查看完整内容。

我知道这是一个常见问题。我试图通过确保以下内容来解决此问题:

• 任何宽度都以 % 表示(事实上，一切都很好地缩放关于宽度)
• 高度是auto(以便它们包裹必要的内容)

当这不起作用时，我将高度值替换为 % 值，而不是简单地使用 auto，确保总高度值不超过 100%。不幸的是，这也没有成功。知道为什么，我能做些什么来完成这项工作？提前致谢!

我的 HTML 和 CSS 可以在这里找到:https://codepen.io/anon/pen/yoBEWb

Answer 1

尝试将 height: 100vh; 更改为 min-height: 100vh;