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

Question

我正在尝试以下样式:

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

我的要求是:

1. max-height div等于屏幕高度
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());

UPDATE

正如约翰的回答中提到的那样.使用最新的CSS3 API,您可以使用vh(查看端口单位的高度)

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

Answer 3

滚动条仅在内容出现时出现overflown.

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

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