Question

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

我希望模态对话框居中，最大高度为90vh。
我也希望内容只有模态体才能滚动溢出。

请你告诉我这里可能做错了什么？

请注意：我不希望滚动完整的模态对话框。只是模态体。模态对话框的最大高度应为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>

Answer 1

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

因此，您可以将max-height设置为.modal-body。在我的片段中，我使用calc去除了所有高度和垂直边距/填充，它们不是模体高度的一部分，从100vh开始。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

@Punit的答案似乎完美无缺（+1）。

如果需要，这里有另一种解决方案：

＆＃13;

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

＆＃13;

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

＆＃13;

jsFiddle

Answer 3

我能够修复第二个，第一个应该工作，但我没有测试它。 overflow-y可以是auto或scroll。

这是新的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;
}

Answer 4

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

Answer 5

.modal-body{
  overflow-y: auto !important;
  max-height: 90vh !important;
}

试试这个

max-height不适用于位置为：固定的Flex容器中的模态对话框

5 个答案:

jsFiddle