Bootstrap 模态内容未填满模态体答案

【问题标题】：Bootstrap modal content not filling up modal-bodyBootstrap 模态内容未填满模态体
【发布时间】：2018-03-30 15:24:35
【问题描述】：

对可能出现的多余问题表示歉意，但搜索“填充”之类的关键字对解决手头的问题并没有真正的帮助。

我无法让 Bootstrap 模态主体的内容填满整个主体空间。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="static/style.css">
  </head>
  <body>
    <div class="container">
      <div class="container-fluid">

            <div class="form-row">
              <div class="col-md-8">
                <button class="btn btn-outline-secondary" data-toggle="modal" data-target="#benchmarkModal" id="benchmark">Select Benchmark</button>
              </div>
            </div>

        <!-- Modal -->
        <div class="modal fade" id="benchmarkModal" tabindex="-1" role="dialog" aria-labelledby="benchmarkModalCenterTitle" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="benchmarkModalLongTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <div class="select-menu">
                  <select multiple class="form-control">
                    <option value="test_1" selected"=selected">test_1</option>
                    <option value="test_2" selected"=selected">test_2</option>
                    <option value="test_3" selected"=selected">test_3</option>
                    <option value="test_4" selected"=selected">test_4</option>
                    <option value="test_5" selected"=selected">test_5</option>
                    <option value="test_6" selected"=selected">test_6</option>
                    <option value="test_7" selected"=selected">test_7</option>
                    <option value="test_8" selected"=selected">test_8</option>
                    <option value="test_9" selected"=selected">test_9</option>
                    <option value="test_10" selected"=selected">test_10</option>
                    <option value="test_11" selected"=selected">test_11</option>
                    <option value="test_12" selected"=selected">test_12</option>
                    <option value="test_13" selected"=selected">test_13</option>
                    <option value="test_14" selected"=selected">test_14</option>
                    <option value="test_15" selected"=selected">test_15</option>
                    <option value="test_16" selected"=selected">test_16</option>
                    <option value="test_17" selected"=selected">test_17</option>
                    <option value="test_18" selected"=selected">test_18</option>
                    <option value="test_19" selected"=selected">test_19</option>
                    <option value="test_20" selected"=selected">test_20</option>
                  </select>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <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>
</html>

这是css文件：

.modal-dialog,
.modal-content {
    /* 80% of window height */
    height: 80vh;
}

我要做的就是让选择多个菜单来填充整个模态体，我不知道该怎么做。

这是 JSFiddle：https://jsfiddle.net/2xupfmkL/（拉伸结果框以更好地了解正在发生的事情）

【问题讨论】：

我感觉您的自定义 CSS 可能无法正常工作。您能否检查并确认您是否正确链接了自定义 css？
是的，我已经正确链接了它，因为没有 80vh 属性，模式会缩小到选择多个部分的大小。通过包含 css，模态本身会扩展，但选择多个部分不会

标签： html css twitter-bootstrap bootstrap-modal

【解决方案1】：

.modal-dialog {
    height: 80vh;
}
.modal-content{
  height:100%;
}

.select-menu {
    position: absolute;
    right: 1rem;
    left: 1rem;
    top: 0;
    bottom: 0;
    height: 100%;
}
.select-menu .form-control{
  height:100%;
}

https://jsfiddle.net/2xupfmkL/9/

【讨论】：