CSS中的自动增长模式对话框不应超出屏幕

Question

我目前正在开发一个针对平板电脑的网络应用。我想显示一个模态对话框（标题栏+正文），其增长（高度）不大于其内容要求，但如果内容要求的高度大于视口，则对话框应该有一个滚动条body 元素和视口/父级的最大高度。

我可以通过 CSS/JS 以某种方式实现这一点吗？

Answer 1

你离得很近 这里看看 我在 .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>

Answer 2

您可能只使用max-height: 100vh; 和overflow-y: auto;。

如果您需要从模态框的高度移除一些边距，请随意减小max-height 的值或使用calc(100vh - 30px) 作为值。