儘管寬度和高度在瀏覽器調整大小時丟失內容

Question

我目前正面臨瀏覽器大小調整的問題。當頁面是全尺寸（即不被最小化瀏覽器窗口），頁面效果很好，得到這樣的：

然而，當我最小化窗口，使其通過垂直壓縮體積更小，出現這種情況：

內容被切斷了，我不能滾動查看在調整瀏覽器窗口中的全部內容。

我知道這是一個常見問題。我試圖通過確保以解決此問題：

• 任何寬度以％（實際上，一切對於擴展良好 的寬度）
• 高度auto（讓他們換了必要的內容）

當沒有工作了，我更換了高度值與％的值，而不是簡單地使用auto，確保總高度值不超過100％。不幸的是，這也沒有奏效。任何想法爲什麼，以及我能做些什麼來使這項工作？提前致謝！

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

Answer 1

嘗試改變height: 100vh;與min-height: 100vh;

Answer 2

您可以使用媒體查詢適當調整你的屏幕和適應您的內容。基本上媒體查詢就像是一個規則，例如：如果我的屏幕高度小於或等於480px，那麼請縮小字體大小，將它放在下面...更多信息here。