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％（或任何您希望的高度）

.modal-header设置为不增大或缩小

flex: 0 0 auto;

.modal-footer设置为不增长或收缩

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>

具有可滚动主体和不固定标头高度的Bootstrap 4模态

1 个答案: