Html 按百分比设置引导模态主体高度

Set bootstrap modal body height by percentage

提问by thraxst

I am trying to make a modal with a body that will scroll when the content becomes too large. However, I want the modal to be responsive to the screen size. When I set the max-height to 40% it has no effect. However, if I set the max-height to 400px it works as expected, but is not responsive. I am sure I am just missing something simple, but I can't seem to get it to work.

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

Here is an example

这是一个例子

Doesn't work:

不起作用：

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

Works:

作品：

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

回答by Mehmet Ata?

This worked for me

这对我有用

.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;
}

Fiddle: http://jsfiddle.net/mehmetatas/18dpgqpb/2/

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

回答by Ryan

Instead of using a %, the units vh set it to a percent of the viewport (browser window) size.

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

I was able to set a modal with an image and text beneath to be responsive to the browser window size using vh.

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

If you just want the content to scroll, you could leave out the part that limits the size of the modal body.

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

/*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;
}

回答by bard

This should work for everyone, any screen resolutions:

这应该适用于任何屏幕分辨率的所有人：

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

First, count your modal header and footer height, in my case I have H4heading so I have them on 141px, already counted default modal margin in 20px(top+bottom).

首先，计算您的模态页眉和页脚高度，在我的情况下，我有H4标题，所以我将它们打开141px，已经在20px(top+bottom).

So that subtract 141pxis the max-heightfor my modal height, for the better result there are both border top and bottom by 1px, for this, 143pxwill work perfectly.

所以减去141px是max-height我的模态高度，为了更好的结果，边框顶部和底部都由1px，为此，143px将完美地工作。

In some case of styling you may like to use overflow-y: auto;instead of overflow-y: scroll;, try it.

在某些样式的情况下，您可能喜欢使用overflow-y: auto;代替overflow-y: scroll;，请尝试一下。

Try it, and you get the best result in both computer or mobile devices. If you have a heading larger than H4, recount it see how much pxyou would like to subtract.

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

If you don't know what I am telling, just change the number of 143px, see what is the best result for your case.

如果您不知道我在说什么，只需更改 的数量143px，看看哪种情况最适合您的情况。

Last, I'd suggest have it an inline CSS.

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

回答by VictorySaber

You've no doubt solved this by now or decided to do something different, but as it has not been answered & I stumbled across this when looking for something similar I thought I'd share my method.

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

I've taken to using two div sets. One has hidden-xs and is for sm, md & lg device viewing. The other has hidden-sm, -md, -lg and is only for mobile. Now I have a lot more control over the display in my CSS.

我已经习惯使用两个 div 集。一个有 hidden-xs，用于 sm、md 和 lg 设备查看。另一个有 hidden-sm、-md、-lg 并且仅适用于移动设备。现在我对 CSS 中的显示有了更多的控制。

You can see a rough idea in this js fiddlewhere I set the footer and buttons to be smaller when the resolution is of the -xs size.

您可以在这个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>

回答by lokers

The scsssolution for Bootstrap 4.0

在scss为解决方案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-dialog { .modal-content { .modal-body { max-height: calc(80vh - 140px); overflow-y: auto; } } } }

Make sure the .modalmax-heightis 100vh. Then for .modal-bodyuse calc()function to calculate desired height. In above case we want to occupy 80vhof the viewport, reduced by the size of header + footer in pixels. This is around 140px together but you can measure it easily and apply your own custom values. For smaller/taller modal modify 80vhaccordingly.

确保.modalmax-height是100vh. 然后.modal-body使用calc()函数来计算所需的高度。在上面的情况下，我们想要占用80vh视口，减少页眉+页脚的大小（以像素为单位）。这大约是 140 像素，但您可以轻松测量它并应用您自己的自定义值。对于较小/较高的模态，请相应修改80vh。