我怎样才能使它成为 height: 100vh on mobile 和/或 scrollable

Question

我正在做一个小的 Web-App。我想让它响应较小的设备。问题是，在手机上，侧边栏无法滚动以查看底部的最后一项，我不知道如何让它在手机屏幕上看起来更好。

解决方案如下：

@media (max-width: 500px) {
  #sidebar {
    height: 100vh;
  }
}

但这不起作用，我不知道为什么。有什么想法吗？

Answer 1

你可以在你的 "nav" 标签里试试这个

height: 100%;
overflow: scroll;

这是因为您使用的是像素。响应式网站最好使用百分比数字。另外，尝试搜索 "overflow" propriety

Answer 2

导航栏的元素有高度、内边距、边框、边距……以 px 或 em 为单位。
它们加起来溢出了你的 height: 100vh.
最简单的解决方案就像 Bob Farias 建议将 overflow-y: auto 或 overflow-y: scroll 添加到

#sidebar {
    height: 100vh;
  }

有更费力的方法来避免滚动和溢出，例如将您的元素 "heights" 设置为 100vh 的分数，或重新设计您的导航栏。

how can i make this be height: 100vh on mobile and or scrollable