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 {