综述: 优化平台端web布局结构,移除多余嵌套层级

- 移除`.content-container`中间层,简化HTML结构,减少不必要的嵌套
- 优化`.content-area`样式,移除固定padding和背景色,使用flex布局和相对定位
- 将`.tab-content`改为绝对定位,直接填充父容器,最大化可用区域
- 移除iframe的固定高度限制(600px),改为自适应父容器高度(100%)
- 移除`.content-container`的最小高度限制(400px)和装饰性样式
- 修改JavaScript中的DOM查询,将`.content-container`选择器改为`.content-area`
- 优化首页内容区域,直接作为`.content-area`的子元素,减少嵌套层级
- 通过以上优化,iframe内容区域可以充分利用从标签页到窗口底部的所有垂直空间
This commit is contained in:
linbin 2025-10-21 01:55:04 +08:00
parent e2f5333831
commit 5cef624e75
1 changed files with 27 additions and 19 deletions

View File

@ -309,17 +309,27 @@
/* 内容区域 */
.content-area {
flex: 1;
background: #f5f5f5;
padding: 20px;
overflow-y: auto;
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
}
.content-container {
background: #fff;
border-radius: 8px;
padding: 24px;
min-height: 400px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
.tab-content {
flex: 1;
overflow: hidden;
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.tab-content iframe {
width: 100%;
height: 100%;
border: none;
}
/* 响应式设计 */
@ -419,11 +429,9 @@
<!-- 内容区域 -->
<div class="content-area">
<div class="content-container">
<div id="tab-content-home" class="tab-content active">
<h2 style="font-size: 24px; font-weight: 600; color: #262626; margin-bottom: 16px;">欢迎使用管理后台</h2>
<p style="color: #666; font-size: 14px;">这是首页内容区域,点击左侧菜单可以在此区域显示对应的页面内容。</p>
</div>
<div id="tab-content-home" class="tab-content" style="display: block;">
<h2 style="font-size: 24px; font-weight: 600; color: #262626; margin-bottom: 16px; padding: 24px 24px 0;">欢迎使用管理后台</h2>
<p style="color: #666; font-size: 14px; padding: 0 24px;">这是首页内容区域,点击左侧菜单可以在此区域显示对应的页面内容。</p>
</div>
</div>
</main>
@ -467,7 +475,7 @@
tabsContainer.appendChild(newTab);
// 创建新内容区域
const contentArea = document.querySelector('.content-container');
const contentArea = document.querySelector('.content-area');
const newContent = document.createElement('div');
newContent.id = `tab-content-${tabId}`;
newContent.className = 'tab-content';
@ -506,13 +514,13 @@
tabsContainer.appendChild(newTab);
// 创建新内容区域使用iframe嵌入页面
const contentArea = document.querySelector('.content-container');
const contentArea = document.querySelector('.content-area');
const newContent = document.createElement('div');
newContent.id = `tab-content-${tabId}`;
newContent.className = 'tab-content';
newContent.style.display = 'none';
newContent.innerHTML = `
<iframe src="${link.href}" style="width: 100%; height: 600px; border: none;"></iframe>
<iframe src="${link.href}"></iframe>
`;
contentArea.appendChild(newContent);
@ -533,11 +541,11 @@
// 激活指定标签页
const activeTab = document.querySelector(`[data-tab="${tabId}"]`);
const activeContent = document.querySelector(`#tab-content-${tabId}`);
if (activeTab && activeContent) {
activeTab.classList.add('active');
activeContent.style.display = 'block';
// 不更新面包屑导航中的标题
}
}