Css 使模态弹出窗口足够大，如果需要，使用滚动条

由于我无法控制的原因，我们仍在使用Bootstrap 2.3.2。我有一个模式弹出窗口，可以显示1到50行信息。我将其设置为屏幕上能容纳的最大尺寸，并使中间部分，即

.modal body

在需要时有一个滚动条。我的HTML看起来像：

<div id="confirm-popup" class="modal hide fade" role="dialog"
    aria-labelledby="confirm-popup-subject" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="confirm-popup-subject">XXX</h3>
  </div>
  <div class="modal-body" id="confirm-content">
  </div>
  <div class="modal-footer">
    <button id="confirm-popup-edit" class="btn" data-dismiss="modal"
    aria-hidden="true">Edit</button>
    <button id="confirm-popup-cancel" class="btn" data-dismiss="modal"
    aria-hidden="true">Cancel</button>
    <button id="confirm-popup-submit" class="btn btn-primary"
    aria-hidden="true" data-dismiss="modal">Create Ticket</button>
  </div>
</div>

---

这使得对话框占据了大部分屏幕，如果它需要滚动条，它就有了滚动条。但是现在客户说，当它只有几行文字要显示时，他们不希望它太大。他们希望它是最小的大小，并且仍然适合正文文本，但是如果正文文本不适合屏幕，则在模态正文上仍然有一个滚动条。这可能吗？

经过一些实验，如果我将CSS更改为以下内容，我会得到可接受的结果：

#confirm-popup {
  overflow: initial;
  top: 2%;
}
#confirm-popup .modal-body {
  overflow-y: auto;
  max-height: 70vh;
}

---

它并不完美-如果我使浏览器太短，它会与屏幕重叠-但它适用于所有支持的浏览器大小。

经过一些实验，如果我将CSS更改为以下内容，我会得到可接受的结果：

#confirm-popup {
  overflow: initial;
  top: 2%;
}
#confirm-popup .modal-body {
  overflow-y: auto;
  max-height: 70vh;
}

---

它不是完美的-如果我把浏览器设置得太短，它会与屏幕重叠-但它适用于所有支持的浏览器大小。

你的意思是你的弹出窗口应该是固定大小的，如果你的内容比默认大小大，那么你的模型体应该得到滚动，而不是变大。？？@shalinpetel不，我想这样做根据需要进行扩展，但一旦达到屏幕上显示的最大值，然后它会在模态体中得到一个滚动条。你的意思是你的弹出窗口应该是固定大小的，如果你的内容大于默认大小，那么你的模型体应该得到滚动条，而不是变大。？？@shalinpetel否，我希望它根据需要扩展，但是一旦它达到了屏幕上的最大值，它就会在模态体中得到一个滚动条。