下面是优化后的代码，主要是将侧边栏的位置从
fixed 改成 absolute，并且
设置左边距为负的侧边栏宽度。然后使用 JavaScript 动态计算
内容区域的左边距，避免与侧边栏重合。同时，将
内容区域的最小高度改成了屏幕高度减去头部高度减去
底部高度，确保
内容区域不会被其他元素遮挡。
```
html
<!DOCTYPE
html>
<
html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1
.0">
<title>后台管理界面示例</title>
<style>
body {
margin
: 0;
padding
: 0;
font-family
: Arial, Helvetica, sans-serif;
}
header {
background-color
: #333;
color
: #fff;
display
: flex;
justify-content
: space-between;
align-items
: center;
padding
: 20px 20px 20px 20px;
position: fixed;
top
: 0;
left
: 0;
right
: 0;
z-index
: 1;
}
header h1 {
margin
: 0;
font-size
: 24px;
}
header
.user {
display
: flex;
align-items
: center;
cursor
: pointer;
}
header
.user img {
width
: 30px;
height
: 30px;
border-radius
: 50%;
margin-right
: 10px;
}
.sidebar {
background-color
: #eee;
position: absolute;
top
: 70px;
left
: -200px;
bottom
: 0;
width
: 200px;
padding
: 10px;
overflow
: auto;
z-index
: 1;
transition
: left 0
.3s ease-in-out;
}
.sidebar
.show {
left
: 0;
}
.sidebar h2 {
margin
: 0;
font-size
: 18px;
margin-bottom
: 10px;
}
.sidebar ul {
padding
: 0;
margin
: 0;
list-style
: none;
}
.sidebar li {
margin-bottom
: 5px;
}
.sidebar a {
display
: block;
padding
: 5px 10px;
color
: #333;
border-radius
: 5px;
text-decoration
: none;
background-color
: #fff;
transition
: background-color 0
.2s ease-in-out;
}
.sidebar a
:hover {
background-color
: #ddd;
}
.content {
margin
: 60px 0 0 220px;
padding
: 10px;
background-color
: #f5f5f5;
min-height
: calc(100vh - 70px - 10px);
}
</style>
</head>
<body>
<header>
<h1>中央管理平台</h1>
<div class="user">
<img src="user
.png" alt="">
<span>未登录</span>
</div>
</header>
<div class="sidebar">
<h2>功能模块</h2>
<ul>
<li>
<a href="#">用户管理</a>
<ul>
<li><a href="#">添加用户</a></li>
<li><a href="#">删除用户</a></li>
<li><a href="#">修改用户</a></li>
</ul>
</li>
<li>
<a href="#">数据库管理</a>
<ul>
<li><a href="#">备份数据库</a></li>
<li><a href="#">还原数据库</a></li>
</ul>
</li>
<li>
<a href="#">页面管理</a>
<ul>
<li><a href="#">添加页面</a></li>
<li><a href="#">删除页面</a></li>
<li><a href="#">修改页面</a></li>
</ul>
</li>
</ul>
</div>
<div class="content">
<!-- 这里是
内容区域 -->
</div>
<script>
// 动态计算
内容区域的左边距，避免与侧边栏重合
function adjustContentMargin() {
const sidebarWidth = document
.querySelector('
.sidebar')
.offsetWidth;
document
.querySelector('
.content')
.style
.marginLeft = sidebarWidth + 'px';
}
adjustContentMargin();
window
.addEventListener('resize', adjustContentMargin);
// 点击菜单
按钮时显示/隐藏侧边栏
document
.querySelector('
.menu-btn')
.addEventListener('click', () => {
document
.querySelector('
.sidebar')
.classList
.toggle('show');
});
// 模拟后端数据传来时，只刷新头部和侧边栏之外的区域
setTimeout(() => {
document
.querySelector('
.content')
.inner
HTML = '<h2>欢迎使用中央管理平台</h2><p>这里是
内容区域，只有在后端有数据传来时才会刷新。</p>';
adjustContentMargin(); //
内容区域高度可能会变化，需要重新计算左边距
}, 3000);
</script>
</body>
</
html>
```
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
