コンテンツが大きくなりすぎるとスクロールするボディを使用してモーダルを作成しようとしています。ただし、モーダルは画面サイズに応答する必要があります。 max-heightを40%に設定しても効果はありません。ただし、max-heightを400pxに設定すると、期待どおりに動作しますが、応答しません。単純なものが不足しているに違いないと確信していますが、機能させることができないようです。
動作しません:
.modal-body {
max-height:40%;
overflow-y: auto;
}
作品:
.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;
}
単位vhは、%を使用する代わりに、ビューポート(ブラウザーウィンドウ)サイズのパーセントに設定します。
Vhを使用して、ブラウザウィンドウのサイズに応答するように、画像とテキストを含むモーダルを設定できました。
コンテンツをスクロールするだけの場合は、モーダルボディのサイズを制限する部分を省略できます。
/*When the modal fills the screen it has an even 2.5% on top and bottom*/
/*Centers the modal*/
.modal-dialog {
margin: 2.5vh auto;
}
/*Sets the maximum height of the entire modal to 95% of the screen height*/
.modal-content {
max-height: 95vh;
overflow: scroll;
}
/*Sets the maximum height of the modal body to 90% of the screen height*/
.modal-body {
max-height: 90vh;
}
/*Sets the maximum height of the modal image to 69% of the screen height*/
.modal-body img {
max-height: 69vh;
}
あなたは間違いなくこれを解決したか、別のことをすることに決めましたが、答えられていないので、似たようなものを探しているときに私はこれに出くわしました。
2つのdivセットを使用しました。 1つはhidden-xsを持ち、sm、md、lgデバイスの表示用です。もう1つにはhidden-sm、-md、-lgがあり、モバイル専用です。これで、CSSの表示をより詳細に制御できるようになりました。
これで大まかなアイデアを見ることができます js fiddle ここで、解像度が-xsサイズのときにフッターとボタンを小さく設定します。
<div class="modal-footer">
<div class="hidden-xs">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
<div class="hidden-sm hidden-md hidden-lg sml-footer">
<button type="button" class="btn btn-xs btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-xs btn-primary">Save changes</button>
</div>
</div>
_Bootstrap 4.0
_のscss
ソリューション
.modal { max-height: 100vh; .modal-dialog { .modal-content { .modal-body { max-height: calc(80vh - 140px); overflow-y: auto; } } } }
_.modal
_ _max-height
_が_100vh
_であることを確認してください。次に、_.modal-body
_にcalc()
関数を使用して、希望の高さを計算します。上記の場合、ビューポートの_80vh
_を占有し、ヘッダー+フッターのサイズをピクセル単位で縮小します。これは合わせて約140ピクセルですが、簡単に測定して独自のカスタム値を適用できます。 より小さい/より高いモーダルの場合は、_80vh
_を適宜変更してください。