Question

我有一个bootstrap模态，模态的主体设置为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事件中，则模式的默认代码将覆盖与css相关的更改。如果您的更改位于shown.bs.modal，则可以保证模式的默认代码不会再发生更改。

 $('#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％的窗户高度会很小。希望你明白我的意思。

溢出-y没有滚动条

1 个答案: