如何将最大高度css属性指定为屏幕大小

How to specify max-height css property to Screen size

本文关键字：屏幕 属性 css 高度      更新时间：2024-06-05

我正在尝试以下样式：

.scrollDiv {
    height:auto;
    max-height:100%;
    overflow:auto;   
}

我的要求是：

  1. div的max-height等于屏幕高度
  2. 如果div中的内容超过了屏幕大小，那么滚动条应该出现在div中

为此使用CSS Viewport单元。

示例：

.scrollDiv {
    max-height: 100vh;
    overflow: auto;
}

更多信息：https://www.w3schools.com/cssref/css_units.asp

您可以使用$(window).height()将最大高度设置为屏幕高度：

$('.scrollDiv').css('max-height', $(window).height());

更新

正如约翰的回答中提到的。使用最新的CSS3 API，您可以使用vh的（高度查看端口单元）

.scrollDiv {
    max-height: 100vh;
    overflow: auto;
}

只有当内容为overflown时才会显示滚动条。

如果内部div的max-height等于其容器的高度，滚动条将永远不会出现。如果你想看到滚动条使用这个。

.scrollDiv {
    height:auto;
    max-height:150%;
    overflow:auto;   
}
相关文章：