带有页眉、内容和页脚部分的响应模式对话框

Question

我有一个模态，页眉和页脚是粘性的，中间部分是基于内容滚动的。

在桌面上，它的工作非常好，但在移动和平板电脑上，页脚被拉伸，没有显示100%。

我希望实现高度响应对话框与页眉/页脚粘性和内容部分滚动。

我在这里做错了什么？

null

css prettyprint-override">.modal {
  width: 500px;
  display: flex;
  text-align: left;
  flex-direction: column;
}

.header {
  height: 204px;
}

.content {
  top: 204px;
  bottom: 72px;
  overflow-y: auto;
}

.footer {
  height: 72px;
  flex-shrink: 0;
  overflow: hidden;
}

<div class="modal">
  <div class="header">
    Header Content
  </div>

  <div class="content">
    Content Section
  </div>

  <div class="footer">
    Footer Section
  </div>
</div>

null

Answer 1

使模式的宽度为100%，但然后将max-width设置为500px。

你可以这样做：

.modal {
  max-width: 500px;
  width: 100%;
  display: flex;
  text-align: left;
  flex-direction: column;
}