如何指定最大高度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