オーバーフロー隠しを使用せずにレスポンシブデザインでモーダルの高さを制限する方法は？

Question

明らかにブートストラップモーダルビューの高さは反応しません。 [サンプルはここで見つけることができます]（http://getbootstrap.com/javascript/#modals） ユーザのデバイスサイズの選択に基づいて、モダールの高さを小さくしたいと思います。

overflow: hidden; 

これはモーダルコンテンツをカットしているようです。私はどちらも使用したくないoverflow-y: scroll;

@media (min-width: 900px) { 
 
    .my-dialog .modal-dialog { 
 
     width: 900px; 
 
     max-height: 750px; 
 
     overflow: hidden; 
 
    } 
 
}

Answer 1

あなたはCSSの長さの単位vh、vw、vmin、vmaxの聞いたことがある場合、私は知りません。彼らはあなたの問題の解決策になるかもしれません。 Mozillaの開発者ネットワークから<length> - CSS | MDNから

：ビューポートの幅の

• 1vw = 1％。
• 1vh =ビューポートの高さの1％。
• =ビューポートの高さと幅の最小値の1％。
• 1vmax =ビューポートの高さと幅の間の最大値の1％。

あなたが探しているのは、ユニットvhです。

でも、browser support table for the viewport unitsを確認してください。