Question

我想为较小的设备为某个类设置不同的css设置，而不是为更大的屏幕设置，但我的css代码不能按我的意愿工作。我主要在我的项目中使用Bootstrap，但我也添加了一些自己的CSS。对于“普通”大小的屏幕，我使用此css代码：

div.middleDiv{
max-height: 100%;
overflow: scroll;
}

对于较小的设备，我想对middleDiv类使用以下设置：

@media screen and (max-width: 767px) {
   div.middleDiv{
   overflow: visible;
   max-height: none;
   }
}

我的想法是只在正常设备（例如计算机）上出现溢出的情况下将滚动条放在所需的div上，但我喜欢较小设备的默认设置，所以我想保留这些设置的默认设置。似乎我无法“覆盖”我对默认设备的设置。谁能帮帮我吗？我还将在下面包含我想要的截图。谢谢。

Answer 1

您可以访问：::-webkit-scrollbar来访问滚动条属性。请尝试以下css。

CSS：

::-webkit-scrollbar { 
    display: none; 
}

Answer 2

问题似乎是DIV的100％高度。你可以尝试这样：

div.middleDiv{
  max-height: calc(100vh - 20px);
  overflow-y: scroll;
}