按百分比设置 bootstrap 模态身高

问题描述 投票：0回答：7

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

这是一个示例

不起作用：

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

作品：

.modal-body {
    max-height:400px; 
    overflow-y: auto;
}
html css twitter-bootstrap modal-dialog
7个回答
77
投票

这对我有用

.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/

37
投票

单位 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;
}
20
投票

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

.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
的数字，看看什么是最适合您情况的结果。

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

4
投票

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

我开始使用两个 div 集。一种具有隐藏 xs，用于 sm、md 和 lg 设备查看。另一个有隐藏-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>
2
投票

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-body
使用 
calc()
函数计算所需的高度。在上面的例子中，我们想要占据视口的
80vh
，并减少页眉+页脚的大小（以像素为单位）。这大约是 140 像素，但您可以轻松测量并应用您自己的自定义值。 对于更小/更高的模态，相应地修改 
80vh
。

1
投票

这就是解决方案

.modal-dialog{
            height:100%
        }
        .modal-content{
            height:90%
        }
        .modal-body{
            height:100%;
            overflow:auto
        }

0
投票

这是使用 Lightbox for Bootstrap 5 时的一个小更新。它根据加载的内容（图像、html、视频...）连接多个 div，因此上述解决方案可能无法正常工作。

结构如下：

<modal lightbox>
  <modal-dialog>
    <modal-content>
      <modal-body>
        <carousel-item>
          <ratio>
            <!-- Lightbox puts the content in this Div -->

当然，我以类的名字命名它以提高可读性。 混合不同的答案，我得出了这个：

.modal-body {
    max-height: calc(100vh - 60px);
    /* Customize depending on the elements closing your content */
    overflow-y: hidden; 
    /* Lightbox already applies overflow:auto so you can skip this one */
}

div.ratio {
    height: 80vh;
    /* div.ratio is the final container so it made sense to change height here */
}

像往常一样，根据您的上下文进行修改，但我制作的地图可能会对您有所帮助。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.