修复移动端注册按钮高度问题 - 添加 height: 100% 到 nav-header .nav-right
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
深层根本原因分析:
之前修复使用了 align-items: stretch,但这只是 flexbox 的对齐属性,
并不能让 flex item 自动获得高度。关键问题是:
布局链条:
nav-header (height: 50px, display: flex, align-items: stretch)
└─ nav-right (✗ 没有 height 设置)
└─ no-login (height: 100% 但父元素是 0px)
└─ registBtn (height: 100% 但父元素是 0px)
当 flex item 没有显式 height 且内容为 0px 时,即使使用
align-items: stretch 也会折叠到 0px。
修复方案:
1. 767px 断点 (line 2498-2501):
添加 height: 100% 到 #index .nav-header .nav-right
2. 575px 断点 (line 3062-3065):
改 align-items: center → stretch
添加 height: 100%
3. 360px 断点 (line 3564-3567):
已正确有 height: 100%
修复后的高度继承链:
nav-header: 50px
└─ nav-right: 50px (100% of parent) ✅
└─ no-login: 50px (100% of parent) ✅
└─ registBtn: 50px (100% of parent) ✅
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -2498,6 +2498,7 @@ html {
|
||||
#index .nav-header .nav-right {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#index .nav-menu {
|
||||
@@ -3060,7 +3061,8 @@ html {
|
||||
|
||||
#index .nav-header .nav-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: stretch;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#index .nav-header .nav-left .nav-icon {
|
||||
|
||||
Reference in New Issue
Block a user