Question

我正在尝试制作一个带有正文的模态，当内容变得太大时会滚动。但是，我希望模态能够响应屏幕大小。当我将max-height设置为40％时，它没有任何效果。但是，如果我将max-height设置为400px它按预期工作，但没有响应。我确信我只是遗漏了一些简单的东西，但我似乎无法让它发挥作用。

这是example

不能工作：

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

使用：

.modal-body {
    max-height:400px; 
    overflow-y: auto;
}

Answer 1

这对我有用

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

.modal-body {
    /* 100% = dialog height, 120px = header + footer */
    max-height: calc(100% - 120px);
    overflow-y: scroll;
}

小提琴：http://jsfiddle.net/mehmetatas/18dpgqpb/2/

Answer 2

而不是使用％，单位vh将其设置为视口（浏览器窗口）大小的百分比。

我能够使用vh设置一个带有图像和文本的模态，以响应浏览器窗口大小。

如果您只想滚动内容，可以省略限制模态体大小的部分。

/*When the modal fills the screen it has an even 2.5% on top and bottom*/
/*Centers the modal*/
.modal-dialog {
  margin: 2.5vh auto;
}

/*Sets the maximum height of the entire modal to 95% of the screen height*/
.modal-content {
  max-height: 95vh;
  overflow: scroll;
}

/*Sets the maximum height of the modal body to 90% of the screen height*/
.modal-body {
  max-height: 90vh;
}
/*Sets the maximum height of the modal image to 69% of the screen height*/
.modal-body img {
  max-height: 69vh;
}

Answer 3

这适用于所有人，任何屏幕分辨率：

.modal-body {
    max-height: calc(100vh - 143px);
    overflow-y: auto; }

首先，计算你的模态页眉和页脚高度，在我的情况下我有H4标题，所以我在141px上有它们，已计入20px(top+bottom)中的默认模态边距。

因此，对于我的模态高度，减去141px是max-height，为了获得更好的结果，1px的边界顶部和底部都是143px，为此，overflow-y: auto;将完美地工作。

在某些样式的情况下，您可能希望使用overflow-y: scroll;代替H4，请尝试使用。

试一试，您可以在计算机或移动设备上获得最佳效果。如果您的标题大于px，请重新计算它，看看您想要减去多少143px。

如果您不知道我在说什么，只需更改string file = allFiles.FirstOrDefault(f => f.Contains(fullname)) ?? allFiles.FirstOrDefault(f => f.Contains(Name)); if (file != null) Process.Start(file);的数量，看看您案例的最佳结果。

最后，我建议使用内联CSS。

Answer 4

你无疑已经解决了这个问题，或者决定做一些不同的事情，但是因为它还没有得到回答。我在寻找类似的东西时偶然发现了这一点，我以为我会分享我的方法。

我已经使用了两个div组。一个有隐藏的xs，用于sm，md和amp; LG设备查看。另一个有hidden-sm，-md，-lg，仅适用于移动设备。现在，我可以更好地控制CSS中的显示。

您可以在js fiddle中看到一个粗略的想法，当分辨率为-xs大小时，我将页脚和按钮设置得更小。

  <div class="modal-footer">
      <div class="hidden-xs">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
      </div>
      <div class="hidden-sm hidden-md hidden-lg sml-footer">
    <button type="button" class="btn btn-xs btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-xs btn-primary">Save changes</button>
      </div>
  </div>

Answer 5

scss的{{1}}解决方案

Bootstrap 4.0

确保.modal { max-height: 100vh; .modal-dialog { .modal-content { .modal-body { max-height: calc(80vh - 140px); overflow-y: auto; } } } } .modal是max-height。然后对于100vh，请使用.modal-body函数来计算所需的高度。在上述情况下，我们要占据视口的calc()，并减少页眉+页脚的大小（以像素为单位）。这大约是140像素，但您可以轻松对其进行测量并应用自己的自定义值。 对于较小/较浅的模式，请相应地修改80vh。

按百分比设置bootstrap模态体高

5 个答案: