标记

<div class="modal">
    <div class="modal-inner">
        <div class="modal-header">Title</div>
        <div class="modal-content">…</div>
        <div class="modal-footer">Footer</div>
    </div>
    <div class="modal-background"></div>
</div>

CSS

.modal {
  position: fixed;
  z-index: 10;
  bottom: 0;
  left: 0;

  width: 100%;
  height: 100%;
}

.modal-inner {
  position: relative;
  z-index: 11;

  display: grid;
  grid-template-rows: 70px auto 97px;

  width: 100%;

  background-color: #fff;
}

.modal-header,
.modal-footer {
  display: flex;
  align-items: center;

  width: 100%;
  padding: 24px;
}

.modal-header {
  border-bottom: 1px solid #ccc;
}

.modal-footer {
  border-top: 1px solid #ccc;
}

.modal-content {
  overflow-y: auto;

  height: calc(100vh - 166px);

  padding: 24px;

  -webkit-overflow-scrolling: touch;
}

.modal-background {
  position: absolute;
  z-index: 9;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background: rgba(0,0,0, 0.5);
}

问题

您可以直接在here（CodePen）上尝试使用此代码，并查看它可以正常工作（iOS单元）。但是，当我删除第43行height: calc(100vh - 166px);时，我将无法滚动。因此，这是视口的总高度减去标题，页脚和1个像素（在grid-template-rows行中给出的数字）。如果我将其更改为- 167px或更高的值，它将停止工作。

我已经意识到必须为.modal-content指定一个高度。问题是，我希望模态具有基于内容的动态高度（并将内容放置在底部）。如果内容不够高，无法滚动，我希望.modal-inner不能覆盖整个屏幕。

以前尝试过的解决方案

我不能做max-height: calc(100vh - 166px)并且不指定高度-这是行不通的。

position: sticky而不是position: fixed并没有任何改变。

我也尝试过不使用CSS网格，但是使用flexbox或使用position: absolute使用内容和页脚也会遇到同样的问题。

通过JavaScript在元素上增加高度并不是我想要的解决方案，因为视口大小很多，有时模态中的手风琴可以打开/关闭等。

这是我可以通过代码获得的 clean 。我已经剥离了很多东西，向大家展示了即使以最简单的形式，这也不起作用。

我在Google上的搜索还没有给我任何东西。我已经看过其他知名站点的代码指导，但是似乎没有一个站点使用这种动态高度类型的模态（也许是因为这个错误？）；一个例子是airbnb.com。即使内容量最少，它们仍然始终保持高度。

请通过这个丛林为我提供指导，因为我很快就要拔头发了。

谢谢！

除非指定高度，否则无法滚动模式内容（iOS）

标记

CSS

问题

以前尝试过的解决方案

0 个答案: