尽管宽度和高度在浏览器调整大小时丢失内容

Question

我目前正面临浏览器大小调整的问题。当页面是全尺寸（即不被最小化浏览器窗口），页面效果很好，得到这样的：

然而，当我最小化窗口，使其通过垂直压缩体积更小，出现这种情况：

内容被切断了，我不能滚动查看在调整浏览器窗口中的全部内容。

我知道这是一个常见问题。我试图通过确保以解决此问题：

• 任何宽度以％（实际上，一切对于扩展良好 的宽度）
• 高度auto（让他们换了必要的内容）

当没有工作了，我更换了高度值与％的值，而不是简单地使用auto，确保总高度值不超过100％。不幸的是，这也没有奏效。任何想法为什么，以及我能做些什么来使这项工作？提前致谢！

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

Answer 1

尝试改变height: 100vh;与min-height: 100vh;

Answer 2

您可以使用媒体查询适当调整你的屏幕和适应您的内容。基本上媒体查询就像是一个规则，例如：如果我的屏幕高度小于或等于480px，那么请缩小字体大小，将它放在下面...更多信息here。