最大高度不适用于具有位置的弹性容器中的模态对话框：固定

【问题标题】：max-height not working on modal dialog in flex container with position:fixed最大高度不适用于具有位置的弹性容器中的模态对话框：固定
【发布时间】：2016-08-06 07:18:52
【问题描述】：

为什么没有设置模态对话框的最大高度？

  1. 我希望模态对话框居中并采用 90vh 的最大高度。
  2. 我还希望内容只有模态体滚动，如果它 溢出。

你能告诉我我在这里做错了什么吗？

请注意：我不希望完整的模态对话框滚动。只是模态体。模态对话框的最大高度应为 90vh。之后它不应该在高度上扩大

.modal{
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px;
  background: gray;
}

.modal-dialog{
  position: relative;
  z-index: 1000;
  width: 500px;
  max-width: 100%;
  max-height: 90vh;
}

.modal-header{
  background: cyan;
  padding: 24px 24px;
}

.modal-footer{
  background: cyan;
  display: flex;
  justify-content: flex-end;
  padding: 24px 24px;
}

.modal-body{
  background: red;
  overflow-y: auto;
  padding: 0 24px;
}
<div class="modal">
  <div class="modal-dialog">
    <div class="modal-header">Header</div>
    <div class="modal-body">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
    </div>
    <div class="modal-footer">
      <button type="button">Hello</button>
    </div>
  </div>
</div>

【问题讨论】：

    标签： html css flexbox


    【解决方案1】：

    您需要设置溢出的高度才能正常工作。这意味着为要使其可滚动的元素设置高度，而不是其父元素。

    因此，您可以将max-height 设置为.modal-body。在我的 sn-p 中，我使用 calc 从 100vh 中删除不属于模态体高度的所有高度和垂直边距/填充。

    .modal {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: gainsboro;
}

.modal-dialog {
  position: relative;
  width: auto;
  max-width: 500px;
  margin: 16px;
}

.modal-header {
  background: cyan;
  padding: 16px;
  max-height: 50px;
}

.modal-footer {
  background: cyan;
  display: flex;
  justify-content: flex-end;
  padding: 16px;
  max-height: 50px;
}

.modal-body {
  background: pink;
  overflow-y: auto;
  padding: 16px;
  overflow-y: auto;
  max-height: calc(100vh - 164px);
}
    <div class="modal">
  <div class="modal-dialog">
    <div class="modal-header">Header</div>
    <div class="modal-body">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
    </div>
    <div class="modal-footer">
      <button type="button">Hello</button>
    </div>
  </div>
</div>

    【讨论】：

      【解决方案2】：

      @Punit 的回答似乎完美无缺 (+1)。

      如果需要，这里有一个替代解决方案：

      html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
}
.modal {
  height: 100%;
  z-index: 1000;
  display: flex;
  background-color: gray;
}
.modal-dialog {
  z-index: 1000;
  margin: auto;
  width: 500px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.modal-header {
  background: cyan;
  padding: 24px 24px;
}
.modal-footer {
  text-align: right;
  background: cyan;
  padding: 24px 24px;
}
.modal-body {
  background: red;
  overflow-y: auto;
  padding: 0 24px;
}
      <div class="modal">
  <div class="modal-dialog">
    <div class="modal-header">Header</div>
    <div class="modal-body">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error! Lorem ipsum dolor sit amet, consectetur
      adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet
      facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum
      delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore
      provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur
      neque rerum assumenda officiis sunt quos vero! Error! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis
      sunt quos vero! Error! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error! Lorem
      ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error! Lorem ipsum dolor sit amet, consectetur
      adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet
      facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum
      delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore
      provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur
      neque rerum assumenda officiis sunt quos vero! Error!
    </div>
    <div class="modal-footer">
      <button type="button">Hello</button>
    </div>
  </div>
</div>

      jsFiddle

      【讨论】：

        【解决方案3】：

        您忘记将模态框设置为overflow: auto;

        【讨论】：

          【解决方案4】：

          我能够修复第二个，第一个应该可以工作，但我没有测试它。 溢出-y 可以是自动或滚动。

          这是新的 CSS：

              .html {background: gray;}
.modal{
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px;
  background: gray;
}

.modal-dialog{overflow-y: auto;
  position: relative;
  z-index: 1000;
  width: 500px;
  max-width: 100%;
  max-height: 90vh !important;
}

.modal-header{
  background: cyan;
  padding: 24px 24px;
}

.modal-footer{
  background: cyan;
  display: flex;
  justify-content: flex-end;
  padding: 24px 24px;
}

.modal-body{
  background: red;
  overflow-y: auto;
  padding: 0 24px;
}

          【讨论】：

          • 这不起作用。完整的模态对话框滚动。我希望对话框的最大高度为 90vh，而模态体应该滚动
          • @takeradi 好的，我认为它现在应该可以工作了，请检查一下，我对其进行了编辑并将滚动条添加到模态的正文中，如果它现在可以工作，请告诉我。
          【解决方案5】： 
          .modal-body{
  overflow-y: auto !important;
  max-height: 90vh !important;
}

          试试这个

          【讨论】：

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2016-07-04
            • 1970-01-01
            • 2016-01-04
            • 2013-03-03
            • 2019-08-09
            • 2013-09-07
            相关资源
            最近更新 更多
            热门标签
            Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode