diff --git a/Html/apps/static/css/desktop.css b/Html/apps/static/css/desktop.css
index 8da3f09..ab694a7 100644
--- a/Html/apps/static/css/desktop.css
+++ b/Html/apps/static/css/desktop.css
@@ -107,13 +107,7 @@
.btn-group-toggle .btn {
padding: 5px 10px;
}
- #leftSidebar, .vscode-web, #rightSidebar {
- height: 100%;
- overflow: auto;
- }
-
-
- /* 主容器,使用 grid 布局 */
+ /* 主容器,使用 grid 布局 */
#maxcontainer {
display: grid;
grid-template-columns: 2fr 5px 3fr 5px 2fr; /* 默认宽度比例 */
@@ -122,7 +116,20 @@
/* 各区域基础样式 */
.sidebar {
- overflow: auto; /* 确保内容可以滚动 */
+ display: flex;
+ flex-direction: column;
+ overflow: hidden; /* 隐藏溢出内容,让内部元素单独滚动 */
+ }
+
+ /* 左侧边栏样式 */
+ #leftSidebar {
+ height: 100%;
+ }
+
+ /* 中间和右侧边栏样式 */
+ .vscode-web, #rightSidebar {
+ height: 100%;
+ overflow: auto;
}
.vscode-web {
@@ -162,14 +169,30 @@
+/* Markdown内容区域样式 */
+#markdown-content {
+ flex: 1; /* 占满剩余空间 */
+ overflow-y: auto; /* 只有内容区域可以垂直滚动 */
+ overflow-x: hidden; /* 隐藏水平滚动条 */
+}
+
+/* 设置进度条容器样式 */
+#markdown-content-process {
+ display: flex;
+ align-items: flex-end; /* 让进度条靠底部对齐 */
+ padding: 0 10px 10px 10px; /* 添加底部内边距,调整与底部的距离 */
+ box-sizing: border-box;
+ flex-shrink: 0; /* 防止进度条被压缩 */
+}
+
/* 设置每个子框的基本样式 */
.progress-box {
- height: 100%; /* 高度为 100%,撑满容器 */
+ width: 100%; /* 宽度为 100%,撑满容器 */
display: flex;
flex-direction: row; /* 使子框横向排列 */
justify-content: flex-start;
- align-items: center;
gap: 2px; /* 进度条之间的间距 */
+ margin-bottom: 0; /* 移除底部边距 */
}
.progress-title {