html - overflow-y 无滚动条

Question

我有一个引导模态，模态的主体设置为 overflow-y: auto 以便它滚动溢出:

.modal-content {
  background-color: #fc4747;
}
.modal .modal-body {
  overflow-y: auto;
}

当我加载文本时，它似乎确实会滚动溢出，但当我在其中只有一个高大的 div 时它不会。它只是溢出。看图:

这是我的代码:

<div id="myModal" class="modal fade in" tabindex="-1" role="dialog" data-bind="modal: showDialogue" style="display: block; padding-right: 15px;">
  <div class="modal-dialog">
    <div class="modal-content" style="padding: 0px 25px; height: 140px;">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      </div>
      <div class="modal-body">
        <div class="row" style="">
          <div class="col-sm-4" style="">
            <div data-bind="style: { backgroundImage: 'url(\'../../the_vegan_repository/product_images/' + currentlySelectedProduct().product.imagePath + '\')' }" style="height: 160px; border-radius: 10px; color: white; vertical-align: bottom; background: url(&quot;../../the_vegan_repository/product_images/alpro_creamy_caramel.jpg&quot;) 50% 50% / cover no-repeat;">
            </div><!--image-->
          </div> <!--col-sm-6-->
          <div class="col-sm-6">
            <div style="height: 110px; padding: 10px; background: #fc4747;">
              <h6 class="medium-text" data-bind="text: currentlySelectedProduct().product.brand" style="text-transform: uppercase; color: white; margin-top:0; margin-bottom:5px;">alpro</h6>
              <h6 class="medium-text" data-bind="text: currentlySelectedProduct().product.name" style="text-transform: uppercase; color: white; margin-bottom:5px;display: inline;">creamy caramel</h6>
            </div>
          </div> <!--col-sm-6-->
        </div> <!--row-->                   
      </div>
    </div>
  </div>
</div>

为什么高 div 会溢出而不是滚动？

** 作为旁注，我将引导模式的高度设置为窗口高度的 80%(这需要保持工作状态):

$(document).ready(function() {
    $('#myModal').on('show.bs.modal', function () {
        $('.modal-content').css('height',$( window ).height()*0.8);
    });
});

Answer 1

您应该调用 shown.bs.modal 而不是 show.bs.modal。如果代码在 show.bs.modal 事件中，modal 的默认代码将覆盖您的 css 相关更改。如果您的更改在 shown.bs.modal 中，它保证不会从模态的默认代码发生更多的 css 更改。

 $('#myModal').on('shown.bs.modal', function() {
   $('.modal-content').css('height', $(window).height() * 0.8);
 });

show.bs.modal - 在模式即将显示时发生

shown.bs.modal - 在模式完全显示时发生(在 CSS 转换完成后)

您可能仍然需要尝试使用 $(window).height() * 0.8。如果窗口高度非常小，那么其中的 80% 会小很多。希望你明白我的意思。