style(css): 优化页面滚动条和布局样式

- 修改html和body选择器以正确设置页面尺寸和滚动行为
- 将.app容器的高度设置从100vh改为min-height: 100%
- 更新.nav-collapse-content的最大高度计算方式
- 为body元素添加滚动条隐藏样式
- 统一各组件的滚动条样式处理规则
This commit is contained in:
雨霖铃
2026-01-07 23:43:17 +08:00
parent 259bc51dc5
commit 8956f86443
+13 -9
View File
@@ -1,12 +1,14 @@
/* 隐藏页面滚动条 */ /* 隐藏页面滚动条 */
html { html, body {
overflow: hidden;
}
body {
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: hidden; width: 100%;
height: 100%;
}
/* 隐藏body滚动条但允许滚动 */
body {
overflow: auto;
} }
.app { .app {
@@ -16,9 +18,8 @@ body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
width: 100%; width: 100%;
min-width: 320px; min-width: 320px;
height: 100vh; min-height: 100%;
box-sizing: border-box; box-sizing: border-box;
overflow: auto;
} }
.nav { .nav {
@@ -260,7 +261,7 @@ body {
} }
.nav-collapse-content.show { .nav-collapse-content.show {
max-height: calc(100vh - 48px); max-height: calc(100% - 48px);
overflow-y: auto; overflow-y: auto;
} }
@@ -298,6 +299,7 @@ body {
/* 隐藏滚动条样式 */ /* 隐藏滚动条样式 */
/* WebKit浏览器 (Chrome, Safari, Edge) */ /* WebKit浏览器 (Chrome, Safari, Edge) */
body::-webkit-scrollbar,
.app::-webkit-scrollbar, .app::-webkit-scrollbar,
.nav-collapse-content.show::-webkit-scrollbar, .nav-collapse-content.show::-webkit-scrollbar,
.timestamp-display::-webkit-scrollbar { .timestamp-display::-webkit-scrollbar {
@@ -305,6 +307,7 @@ body {
} }
/* Firefox */ /* Firefox */
body,
.app, .app,
.nav-collapse-content.show, .nav-collapse-content.show,
.timestamp-display { .timestamp-display {
@@ -312,6 +315,7 @@ body {
} }
/* IE/Edge 10+ */ /* IE/Edge 10+ */
body,
.app, .app,
.nav-collapse-content.show, .nav-collapse-content.show,
.timestamp-display { .timestamp-display {