web-dev-qa-db-ja.com

Set bootstrap=モーダルボディの高さ（パーセンテージ）

コンテンツが大きくなりすぎるとスクロールするボディを使用してモーダルを作成しようとしています。ただし、モーダルは画面サイズに応答する必要があります。 max-heightを40％に設定しても効果はありません。ただし、max-heightを400pxに設定すると、期待どおりに動作しますが、応答しません。単純なものが不足しているに違いないと確信していますが、機能させることができないようです。

例

動作しません：

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

作品：

.modal-body {
    max-height:400px; 
    overflow-y: auto;
}
htmlcsscss3twitter-bootstrapmodal-dialog
25
thraxst

これは私のために働いた

.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;
}

フィドル： http://jsfiddle.net/mehmetatas/18dpgqpb/2/

45
Mehmet Ataş

単位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;
}
27
Ryan

あなたは間違いなくこれを解決したか、別のことをすることに決めましたが、答えられていないので、似たようなものを探しているときに私はこれに出くわしました。

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>
3
VictorySaber

_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_を適宜変更してください。

0
lokers