Question

我在Angular-6项目中使用Bootstrap-4模态。对于模态，Modal-Header具有固定的高度，Modal-Body可滚动，而Modal-Footer具有可变的高度，但不可滚动。

下面是我的基本HTML：

/*for debugging purpose*/
.modal {
  display: block !important;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-color: #e0e0e7;
  padding: 15px 20px 15px 55px;
  min-height: 70px;
  border-top: 1px solid #e9ecef;
}

.comment-input {
  position: relative;
  width: 100%;
  min-height: 40px;
}

.textarea {
  max-height: 80px;
  overflow: auto;
  width: 100%;
  min-height: 40px;
  padding: 10px 10px 10px 16px;
  word-wrap: break-word;
  line-height: 20px;
}

.textarea:empty:not(:focus)::before {
  content: 'Type your comments here';
  position: absolute;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="modal" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"></div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <div class="comment-input">
          <div class="textarea" contenteditable="true"></div>
        </div>
      </div>
    </div>
  </div>
</div>

我试图在插入四行文本后使我的文本区域可滚动。在插入四行文本之前，模态页脚应随着文本区域的增长而增加其高度。我试图通过HTML和CSS来做同样的事情，但是莫名其妙的页脚并没有因为textarea的高度而增加。每个可能的解决方案将不胜感激。谢谢。

Answer 1

对于modal body，您需要同时设置max-height和overflow-y: scroll属性，以便当内容超过max-height时它将滚动。

.modal-body {
  max-height: 200px;
  overflow-y: scroll;
}

与modal footer相反，您需要删除文本区域中的max-height以及overflow:auto的{{1}}属性

.textarea

/*for debugging purpose*/

.modal {
  display: block !important;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-color: #e0e0e7;
  padding: 15px 20px 15px 55px;
  min-height: 70px;
  border-top: 1px solid #e9ecef;
}

.comment-input {
  position: relative;
  width: 100%;
  min-height: 40px;
}

.textarea {
  width: 100%;
  min-height: 40px;
  padding: 10px 10px 10px 16px;
  word-wrap: break-word;
  line-height: 20px;
}

.textarea:empty:not(:focus)::before {
  content: 'Type your comments here';
  position: absolute;
}

.modal-body {
  max-height: 200px;
  overflow-y: scroll;
}

Answer 2

您使用了错误的属性，它应该是min-height而不是max-height，请参考以下示例！

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-color: #e0e0e7;
  padding: 15px 20px 15px 55px;
  min-height: 70px;
  border-top: 1px solid #e9ecef;
}

.comment-input {
  position: relative;
  width: 100%;
  min-height: 40px;
}

.textarea {
  max-height: 80px !important;
  overflow: auto;
  width: 100%;
  min-height: 40px;
  padding: 10px 10px 10px 16px;
  word-wrap: break-word;
  line-height: 20px;
}

.textarea:empty:not(:focus)::before {
  content: 'Type your comments here';
  position: absolute;
}

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>
  <div class="" role="dialog"> <!-- I have removed the modal class so that the modal is visible, please ignore this one change -->
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header"></div>
        <div class="modal-body"></div>
        <div class="modal-footer">
          <div class="comment-input">
            <div class="textarea" contenteditable="true"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <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>
</body>

</html>

Bootstrap-4模态页脚中的可滚动Textarea

2 个答案: