如何将max-height css属性指定为Screen size

Question

我正在尝试以下风格：

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

我的要求是：

div的
1. max-height等于屏幕高度
2. 如果div中的内容超出屏幕大小，则滚动条应以div为单位。

Answer 1

使用CSS视口单元。

示例：

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

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

Answer 2

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

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

<强>更新

正如约翰的答案所述。使用最新的CSS3 API，您可以使用vh的{​​（{3}}代表身高）

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

Answer 3

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

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

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