fix: Modal 弹窗高度约束,防止内容溢出视窗

- 添加 max-height 限制,确保弹窗始终在视窗内
- header/footer 固定不压缩,body 内容可滚动
- 兼容 iOS Safari 的 dvh 单位
This commit is contained in:
2026-03-28 17:35:54 +08:00
parent ae75c82505
commit fb9833663c
2 changed files with 58 additions and 0 deletions

View File

@@ -25,6 +25,10 @@
box-shadow: 0 8px 32px rgba(15, 23, 42, 0.16);
width: 420px;
max-width: 90vw;
max-height: calc(100vh - 48px);
max-height: calc(100dvh - 48px);
display: flex;
flex-direction: column;
animation: modal-in 0.2s ease-out;
}
@@ -47,6 +51,7 @@
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--color-border-2);
flex-shrink: 0;
}
.modal-title {
@@ -79,6 +84,9 @@
font-size: $font-size-base;
color: var(--color-text-2);
line-height: 1.6;
flex: 1;
min-height: 0;
overflow-y: auto;
}
// Element: footer
@@ -89,4 +97,5 @@
gap: 8px;
padding: 12px 20px;
border-top: 1px solid var(--color-border-2);
flex-shrink: 0;
}