css - 根据屏幕百分比配置最大高度

Question

我正在使用以下 CSS 来调整滚动框的高度:

.scroll 
{
//max-height: 750px;
max-height: 400px;
overflow-y: auto;
overflow-x: hidden;
}

我想使用 750px，但这对于分辨率较小的屏幕来说太高了。 400px 适用于较小的分辨率，但在较大的屏幕上看起来很糟糕。有没有办法按百分比指定这样的东西？当我尝试 100% 时，它会破坏我的滚动框并使用整个屏幕。

Answer 1

一种解决方案是使用 CSS media queries :

@media(max-width:767px){ /* change the max-width to suit your needs */
  .scroll {
    max-height: 400px;
  }
}

@media(min-width:768px){ /* change the min-width to suit your needs */
  .scroll {
    max-height: 750px;
  }
}