按百分比设置 bootstrap 模态身高

我正在尝试制作一个带有主体的模态，当内容变得太大时，该主体会滚动。但是，我希望模式能够响应屏幕尺寸。当我将最大高度设置为 40% 时，它没有任何效果。但是，如果我将最大高度设置为 400px，它会按预期工作，但不会响应。我确信我只是错过了一些简单的东西，但我似乎无法让它发挥作用。

这是一个example http://jsfiddle.net/97QBn/

不起作用：

.modal-body {
    max-height:40%; 
    overflow-y: auto;
}

Works:

.modal-body {
    max-height:400px; 
    overflow-y: auto;
}

这对我有用

.modal-dialog,
.modal-content {
    /* 80% of window height */
    height: 80%;
}

.modal-body {
    /* 100% = dialog height, 120px = header + footer */
    max-height: calc(100% - 120px);
    overflow-y: scroll;
}

Fiddle: http://jsfiddle.net/mehmetatas/18dpgqpb/2/ http://jsfiddle.net/mehmetatas/18dpgqpb/2/