帶有 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;
}