具有可滚动体和非固定标头高度的引导4模态

Question

我在SO上看到了几个解决方案，还有一些关于如何使Bootstrap模式的主体可以滚动的博客。问题是，这些解决方案要求模态头是一个固定的高度。

在我的例子中，我有显示在模态标题中的文本，它的长度取决于用户单击的内容。我不能使用固定的标题高度，因为我需要标题响应文本。

基本上，我希望模态标题能够占用它所需要的空间，并且模态体的高度会相应地变小，这样整个模态对话框就适合在屏幕上。

在显示之前，是否有任何方法可以预先计算模态标头高度？如果我可以这样做，那么我可以简单地使用jQuery来相应地改变模态体的高度。

或者，对于这个问题有CSS解决方案吗？

下面是我的HTML：

<!-- Modal -->
<div class="modal fade" id="abstract-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="true">
    <div class="modal-dialog modal-lg" id="abstract-modal-dialog" role="document">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header stylish-color" id="modal-header">
                <!-- Modal Title -->
                <h4 id="modal-title" class="modal-title white-text font-weight-bold py-1"></h4>
                <!-- Modal Colour -->
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" class="white-text">&times;</span>
                </button>
            </div>
            <!-- Modal Body -->
            <div class="modal-body" id="modal-body">
                <!-- Publisher -->
                <div class="row" style="padding-bottom: 10px;">
                    <div class="col flush-labels">
                        <h5><span id="modal-publisher" class="badge orange"></span></h5>
                    </div>
                    <!-- Date Published -->
                    <div class="col flush-labels no-left-padding">
                        <h5><span id="modal-published-date" class="badge stylish-color"></span></h5>
                    </div>
                </div>
                <!-- Authors Name -->
                <h5>Authors</h5>
                <p id="modal-authors"></p>
                <h5>Abstract</h5>
                <!-- Abstract -->
                <p id="modal-abstract"></p>
            </div>
            <!-- Modal Footer -->
            <div class="modal-footer flex-center" id="modal-footer">
                <!-- Publisher Link Out Button -->
                <a id="modal-publisher-link-out" href="#" target="_blank">
                    <button type="button" class="btn stylish-color">Publisher's Site<i class="fas fa-external-link-alt ml-2"></i></button>
                </a>
                <!-- Add to Search Button -->
                <button id="add-to-refine-button" type="button" class="btn peach-gradient" data-dismiss="modal">
                    Add to search<i class='fas fa-plus-square ml-2'></i>
                </button>
            </div>
        </div>
    </div>
</div>

我的CSS：

.modal {
  /* Enable smooth-scrolling on iOS */
  -webkit-overflow-scrolling: touch;
}

.modal .modal-content {
  overflow: hidden;
}

.modal-content {
  height: 100%;
}

.modal-header {
  /* can't have a fixed height here */
}

.modal-body {
  /* how to set modal-body height? */
  overflow-y: scroll;
}

这里的任何帮助都是非常感谢的！

Answer 1

您可以使用css flex实现这一点。

我们将模式内容高度设置为90%的视图高度(或任何您希望它成为的)。

模式-标头设置为不增长或收缩

flex: 0 0 auto;

模式-页脚设置为不增长或收缩

flex: 0 0 auto;

​

.modal-content {
  height: 90vh;
}

.modal-header {
  flex: 0 0 auto;
}

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

.modal-footer {
  flex: 0 0 auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container-fluid">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#abstract-modal">
    Launch demo modal
  </button>

  <div class="modal fade" id="abstract-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="true">
    <div class="modal-dialog modal-lg modal-flex" id="abstract-modal-dialog" role="document">
      <div class="modal-content">
        <!-- Modal Header -->
        <div class="modal-header stylish-color" id="modal-header">
          <!-- Modal Title -->
          <h4 id="modal-title" class="modal-title white-text font-weight-bold py-1">Super long title that makes the header taller</h4>
          <!-- Modal Colour -->
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" class="white-text">&times;</span>
                    </button>
        </div>
        <!-- Modal Body -->
        <div class="modal-body" id="modal-body">

          <!-- Publisher -->
          <div class="row" style="padding-bottom: 10px;">
            <div class="col flush-labels">
              <h5><span id="modal-publisher" class="badge orange"></h5>
                        </div>
                        <!-- Date Published -->
                        <div class="col flush-labels no-left-padding">
                            <h5><span id="modal-published-date" class="badge stylish-color"></h5>
                        </div>
                    </div>
                    <!-- Authors Name -->
                    <h5>Authors</h5>
                    <p id="modal-authors">Donec dictum elit et tellus rutrum consequat. Aenean imperdiet et urna quis placerat. Nulla ex nunc, fermentum ac velit sed, euismod convallis nulla. Morbi nibh massa, pulvinar sed velit vitae, luctus gravida orci. Curabitur pellentesque, sem vitae lobortis facilisis, tellus sapien finibus eros, eget maximus neque arcu sed diam. Donec ultricies lacinia leo nec convallis. Proin ut lacus dignissim, feugiat tellus in, semper ipsum. Nullam fermentum massa eu purus facilisis eleifend. Ut sit amet sem vel enim ullamcorper ultricies. Mauris sit amet egestas turpis. Nam eros velit, mattis ac gravida at, mollis quis velit. Integer eu tincidunt lacus, eu mollis sapien. Quisque rutrum dolor quis dui commodo, ac tempor magna commodo. Nullam semper, sem ut varius tempus, ex nibh placerat ex, quis tempor enim risus vitae turpis. Aenean sed erat bibendum, mollis turpis a, volutpat sem. Morbi id turpis in leo feugiat tempus.</p>
                    <h5>Abstract</h5>
                    <!-- Abstract -->
                    <p id="modal-abstract">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a dignissim lacus. Pellentesque varius neque id augue accumsan, id hendrerit nisi vulputate. In nec magna nibh. Proin non iaculis ante. Proin ac elit erat. Praesent pellentesque mauris quis mauris tempus pellentesque. Fusce pulvinar nunc a risus finibus volutpat. Nam eget metus venenatis ligula pulvinar hendrerit viverra ac magna. Vivamus faucibus non felis ac convallis. Curabitur porta, nibh ac venenatis gravida, nisl dui auctor leo, vel blandit sapien justo at nunc.</p>
                </div>
                <!-- Modal Footer -->
                <div class="modal-footer flex-center" id="modal-footer">
                    <!-- Publisher Link Out Button -->
                    <a id="modal-publisher-link-out" href="#" target="_blank">
                        <button type="button" class="btn stylish-color">Publisher's Site<i class="fas fa-external-link-alt ml-2"></i></button>
                    </a>
                    <!-- Add to Search Button -->
                    <button id="add-to-refine-button" type="button" class="btn peach-gradient" data-dismiss="modal">
                        Add to search<i class='fas fa-plus-square ml-2'></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

​