不应超出屏幕的CSS自适应模态对话框。

Question

我目前正在开发一个针对平板电脑的Web应用程序。我想展示一个模态对话框（标题栏+正文），它的高度会根据内容自动调整，但如果内容需要的高度大于视口高度，则对话框中的正文部分应该出现滚动条，并且最大高度为视口/父容器的高度。

我能通过CSS/JS实现这个效果吗？

- Monkeyphant

---

如果您提供代码，那将非常有帮助。 - Uzair Saiyed

我在这里添加了我的糟糕尝试：https://jsfiddle.net/6jndgf34/40/ - Monkeyphant

我添加了一个答案，请看看是否解决了你的问题 @user2316484 - Uzair Saiyed

Answer 1

您可以直接使用max-height: 100vh;和overflow-y: auto;。如有需要，可减小max-height的值或使用calc(100vh - 30px)来去除模态框高度上的一些边距。请注意保留HTML标签。

- mwryl

---

不幸的是，那样行不通。似乎max-height被忽略了。我在这个fiddle中添加了代码：https://jsfiddle.net/6jndgf34/40/ 也许这能解决我的问题。 - Monkeyphant

在你的 jsfiddle 中，你缺少了 overflow 部分。高度是被尊重的，但由于你的 div 允许溢出，所以它正在溢出。:) 只需将 overflow-y: auto; 添加到 div.dialog 中即可使其正常工作。 - mwryl

哦，亲爱的！我怎么会错过这个..非常感谢。这真的让我浪费了2个小时... :/ - Monkeyphant

Answer 2

你就差一步了。看这里，我给.dialog添加了overflow-y: hidden;，它可以正常工作了。

.screen {
    width: 800px;
    height: 200px;

    font-family: sans-serif;
    display: grid;
    place-items: center;
    background-color: gray;
  }

  div.titlebar {
    background-color: green;
    height: 32px;
    display: grid;
    place-items: center;
  }

  div.body {
    overflow-y: scroll;
    background-color: purple;

    /* setting height to 100% (of the parent) */
    /* minus the 32px of the header */
    height: calc(100% - 32px);
  }

  div.dialog {
    width: 400px;
    height: auto; /* auto size ... */
    max-height: 100%; /* ... but dont grow bigger than screen */
    display: flex;
    flex-direction: column;
    background-color: yellow;
    overflow-y: hidden;
  }

<div class="screen">
      <div class="dialog">
        <div class="titlebar">Title</div>
        <div class="body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error
          praesentium aut laboriosam modi eius ex cum, ullam placeat, beatae,
          nobis est quasi voluptate alias necessitatibus excepturi? Voluptas,
          ut! Maxime consequuntur, quod? Ipsa ullam eveniet, dolore voluptas
          eius obcaecati vero sint aut at sapiente! Vel iure distinctio pariatur
          maxime, illo ab voluptate veritatis, porro delectus, earum molestiae
          at ipsam ducimus dicta. Laboriosam perspiciatis molestias voluptatibus
          modi dolorem ea asperiores assumenda alias minus, saepe facilis nam
          consequuntur nulla ipsum delectus totam itaque consequatur molestiae.
          Quibusdam nam, vero fugit mollitia minima dolor, eveniet obcaecati
          sint iste inventore explicabo eligendi ratione harum, tempore quasi.
        </div>
      </div>
    </div>

- Uzair Saiyed

---

请标记我的答案为已回答，以便帮助其他人。 - Uzair Saiyed