ant-design / ant-design/pro-components

🐛[BUG]移动端下SiderMenu无法铺平整个屏幕

Open
#8,672 2 comments 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
4.8k
Forks
1.4k
Avg merge
10h 44m
Merged PRs (30d)
3

Description

提问前先看看:

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

### 🐛 bug 描述
![image](https://github.com/user-attachments/assets/09399483-bc5a-4011-bb2d-c27ba09d2259)

布局配置:mix

### 📷 复现步骤
切换到移动端,页面高度超过100vh

### 🏞 期望结果
![image](https://github.com/user-attachments/assets/6e4ee414-76c0-43d9-9e5e-10da9f305854)

### 💻 复现代码

### © 版本信息

- ProComponents 版本: "@ant-design/pro-components": "^2.6.48",
- 浏览器环境: Chrome 127
- 开发环境: Windows

![image](https://github.com/user-attachments/assets/d41cfeb9-577e-4cd7-895a-06790cc74858)

发现是Drawer里面有个ant-drawer-inline强制修改了ant-drawer-mask布局,把ant-drawer-inline设置成position: fixed就行

Contributor guide

Open the contributing guide

Research direction

Start at the mobile SiderMenu and its Drawer layout, focusing on the ant-drawer-inline element and how it affects the ant-drawer-mask when the page exceeds 100vh. Reproduce the issue in the mix layout on mobile Chrome, then verify that the SiderMenu covers the full screen height without breaking the Drawer mask.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.