CSS Bootstrap 模态框主体最大高度设为100%

在本文中，我们将介绍如何使用CSS来设置Bootstrap模态框（modal）主体的最大高度为100%。

阅读更多：CSS 教程

什么是Bootstrap模态框？

Bootstrap是一个流行的前端框架，用于快速开发响应式网页和web应用程序。其中一个关键组件是模态框，用于在网页上展示临时内容，比如弹出窗口、对话框或提示框等。

模态框通常由一个外部框架和一个内部主体组成。外部框架定义模态框的样式和布局，而内部主体则包含实际的内容。

设置模态框主体最大高度为100%

在Bootstrap中，模态框主体的默认高度是自适应的，根据其内部内容的高度来自动调整。但是，有时我们希望模态框主体的高度能够占满整个可见区域，即最大化高度。

为了实现这个效果，我们可以使用CSS来设置模态框主体的最大高度为100%。具体方法如下：

.modal-body {
  max-height: 100%;
  overflow-y: auto;
}

上述代码将模态框主体的最大高度设置为100%。此外，我们还设置了overflow-y: auto属性，以便在内容溢出时显示垂直滚动条。

示例说明

下面我们将通过一个示例来演示如何设置模态框主体的最大高度为100%。

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Modal Max Height Example</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <style>
    .modal-body {
      max-height: 100%;
      overflow-y: auto;
    }
  </style>
</head>
<body>

<div class="container">
  <h2>Bootstrap Modal Max Height Example</h2>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open Modal
  </button>
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Modal Header</h4>
          <button type="button" class="close" data-dismiss="modal">×</button>
        </div>
        <div class="modal-body">
          <h6>Modal Body</h6>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac odio sed ligula condimentum finibus. Fusce id finibus justo. Aliquam vulputate turpis vel turpis luctus tincidunt ut at urna. Etiam ultricies finibus efficitur. Praesent in felis in dui porta lobortis. Vestibulum vehicula orci et velit mollis, a hendrerit orci interdum. Donec sapien diam, malesuada vitae dui nec, tincidunt condimentum velit. Mauris fringilla vel nibh at tincidunt. Aenean faucibus metus ligula, efficitur dignissim mauris finibus sit amet. Donec non orci elementum, vehicula elit eget, fringilla nisi. Integer fringilla rutrum neque ac congue.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

</body>
</html>

在上述示例中，我们使用了Bootstrap的CSS和JavaScript文件，并在<style>标签中添加了我们之前提到的CSS代码。

当点击”Open Modal”按钮时，会打开一个模态框。模态框主体的内容包括了一些文本，超过模态框高度时，会出现垂直滚动条。