javascript - ブートストラップ モーダル ボディの最大高さ 100%

Question

カスタム サイズ (高さ幅 80%) のブートストラップ モーダル ボディがあり、スクロールします (一部のサイズの画面ではボディ コンテンツがオーバーフローします)。

2 つの問題があります。

1. max-height を 100% に設定することはできません。コンテナーの最大高さではなく、ドキュメント全体の 100% になるためです。これは、スクロールが適切に機能するために必要なものです。
2. モーダル本体の最後尾に固定高さの div があると、コンテンツに対して画面が大きくないとモーダルの外にはみ出してしまいます。

どうすればこれを修正できますか? 私は現在、負のマージンを試していますが、あまり慣れていません。

JavaScript ソリューションを使用できます (backbone.js と同様に jQuery を使用できます)。

ありがとう

編集：提供されたスクリーンショット

編集 2: その他のスクリーンショット

Answer 1

私は陥り、これを修正するために coffeescript を書きました。興味のある方は、ここに coffeescript を示します。

fit_modal_body = (modal) ->
  header = $(".modal-header", modal)
  body = $(".modal-body", modal)

  modalheight = parseInt(modal.css("height"))
  headerheight = parseInt(header.css("height")) + parseInt(header.css("padding-top")) + parseInt(header.css("padding-bottom"))
  bodypaddings = parseInt(body.css("padding-top")) + parseInt(body.css("padding-bottom"))

  height = modalheight - headerheight - bodypaddings - 5 # fudge factor

  body.css("max-height", "#{height}px")

# Here you need to bind your event with the appropriate modal, as an example:
$(window).resize(() -> fit_modal_body($(".modal")))

または、上記で生成された同等の JavaScript。

var fit_modal_body;

fit_modal_body = function(modal) {
  var body, bodypaddings, header, headerheight, height, modalheight;
  header = $(".modal-header", modal);
  body = $(".modal-body", modal);
  modalheight = parseInt(modal.css("height"));
  headerheight = parseInt(header.css("height")) + parseInt(header.css("padding-top")) + parseInt(header.css("padding-bottom"));
  bodypaddings = parseInt(body.css("padding-top")) + parseInt(body.css("padding-bottom"));
  height = modalheight - headerheight - bodypaddings - 5;
  return body.css("max-height", "" + height + "px");
};

$(window).resize(function() {
  return fit_modal_body($(".modal"));
});

Answer 2

これを試してBootstrap Modal v2.1

https://github.com/jshr/bootstrap-modal

Answer 3

pwnna の回答のフォローアップとして、このコードはコンテンツのサイズに応じて可変の高さで動作し、max-height だけでなく、サイズを変更するだけでなく、ロード時にも実行されるため、私にとってはうまく機能しています。

//adjust modal body sizes
var fit_modal_body;

fit_modal_body = function(modal) {
  var body, bodypaddings, header, headerheight, height, modalheight;
  header = $(".modal-header", modal);
  footer = $(".modal-footer", modal);
  body = $(".modal-body", modal);
  modalheight = parseInt(modal.css("height"));
  headerheight = parseInt(header.css("height")) + parseInt(header.css("padding-top")) + parseInt(header.css("padding-bottom"));
  footerheight = parseInt(footer.css("height")) + parseInt(footer.css("padding-top")) + parseInt(footer.css("padding-bottom"));
  bodypaddings = parseInt(body.css("padding-top")) + parseInt(body.css("padding-bottom"));
  height = $(window).height() - headerheight - footerheight - bodypaddings - 150;
  return body.css({"max-height": "" + height + "px", 'height':'auto'});
};

fit_modal_body($(".modal"));
$(window).resize(function() {
  return fit_modal_body($(".modal"));
});

Answer 4

これは完全に機能する Sass ソリューションですが、flexbox が必要です。

  // don't clamp modal height when screen is shorter than 400px
  // .modal-body is short in that case, and the default behavior
  // (entire modal will scroll) is easier to use
  @media(min-height:400px)
    .modal
      // use top/bottom margin here instead of .modal-dialog
      // so that .modal-dialog can use height: 100%
      margin: 30px
      // without overflow: visible the shadow will be clipped
      // at the bottom
      overflow: visible

      > .modal-dialog
        margin: 0 auto
        // height must be explicitly set for .modal-content to
        // use percentage max-height
        height: 100%

        > .modal-content
          display: flex
          flex-direction: column
          max-height: 100%

          > .modal-header,
          > .modal-footer,
            // don't allow header/footer to grow or shrink
            flex: 0 0 auto

          > .modal-body
            // allow body to shrink but not grow
            flex: 0 1 auto
            // make body scrollable instead of entire modal
            overflow-y: auto

Answer 5

位置が相対に設定されている要素内に絶対に配置するようにしてください。そこで、次のようなもので作業できます

{
    bottom:0;
    top:0;
    left:0;
    right:0;

Answer 6

Pwnnaの答えは良いコンセプトを持っています.つぼみは私にとってはうまくいきません. これが私にとってうまくいく解決策です：

fit_modal_body = function (modal, padding) {
    var windowHeight = $(window).height();
    var modalHeight = modal.height();

    var dif = windowHeight - (modalHeight + 2*padding);
    var modalBody = $(".modal-body:first", modal);
    modalBody.css("max-height", modalBody.height() + dif);
};

resizeLastWindow = function () {
    fit_modal_body($(".modal-dialog:last"), 15);
};

$(window).resize(resizeLastWindow);

それはcssに依存しています：

.modal-body {
    overflow-y: auto; 
}

Answer 7

htmlおよびbody要素でウィンドウを埋める:

html, body { height: 100%; }

max-height: 100%ボディ内の要素で使用できるようになりました。要素がウィンドウbodyのサイズになったため、ウィンドウの 100% になります。