如何去除网页底部的空白

Question

我目前正在使用 BootStrap v5 处理我的投资组合网站，我仍在开发该网站，但我遇到了响应问题。我的网页的问题是在高度为 iPad Pro、Nexus 10 和 {{1} 的 Kindle Fire HDX、1280px 和 1280px 中查看时出现空白}} 分别。

投资组合网站在 3 台设备上的屏幕截图

Kindle Fire HDX

Nexus 10

iPad Pro

如图所示，有一个我仍在努力去除的空白区域。

Styles.css

1360px

我试过在 @media (orientation: potrait) and (min-height: 1280px){ body { width: 100%; height: 100%; margin: 0; padding: 0; overflow-y: hidden; } } 中使用 media-query 但没有用。

index.html

CSS

我添加了 <meta name="viewport" content="width=device-width, user-scalable=yes"> 标签，它适用于除上面指定的 3 种设备之外的大多数设备

有没有办法解决这个问题？我读过类似于响应的类似主题，但无济于事。