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

Question

I have a modal, header and footer are sticky and the middle section scrolls based on the content.

On Desktop it works perfectly fine, however on mobile, tablet, the footer is stretched and not shown 100%.

I wish to achieve the height responsive dialog with header/footer sticky and content section scrolling.

What am I doing wrong here?

 .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

make the width of the modal to 100%, but then set the max-width to 500px.

You can do it like this:

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