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

Question

我有一个模态，header 和页脚是粘性的，中间部分根据内容滚动。

在桌面上它工作得非常好，但在移动设备、平板电脑上，页脚被拉伸并且没有 100% 显示。

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

我在这里做错了什么？

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

Answer 1

将模态框的宽度设置为 100%，然后将最大宽度设置为 500px。

你可以这样做：

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