如何指定最大高度CSS属性屏幕大小

Question

我想通过以下方式：

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

我的要求是：

1. 股利max-height等于屏幕高度
2. 如果div中的内容超出屏幕大小，则滚动条应以div形式出现。

Answer 1

仅当内容为overflown时才会出现滚动条。

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

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

Answer 2

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

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

Answer 3

使用CSS视域单位这一点。

例子：

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

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