我正在尝试学习CSS，为此，我正在尝试创建响应式HTML+CSS页面。我的问题是，在移动设备上(宽度<576px(，我想隐藏侧边栏，只有当用户点击标题中的汉堡项目(仅当宽度<576px时可见(时才能打开它。问题是，当侧边栏打开时，带有项目的内容div与它重叠。像这样：重叠
你能帮我解决这个问题吗？我不知道怎么解决这个问题。这是我的代码片段：
body, html {
margin: 0;
padding: 0;
font-size: 1em;
}
#root {
height: 100vh;
}
.app {
width: 100%;
height: 100%;
display: -webkit-flex; /* Safari */
display: flex;
flex-direction: column;
}
.header {
-webkit-flex: 1; /* Safari 6.1+ */
-ms-flex: 1; /* IE 10 */
flex: 0 1 auto;
background-color: coral;
height: 5em;
display: flex;
justify-content: space-between;
align-items: center;
}
.page {
-webkit-flex: 1; /* Safari 6.1+ */
-ms-flex: 1; /* IE 10 */
background-color: lightgreen;
height: 100%;
flex: 0 1 auto;
display: flex;
flex-direction: column;
}
/* sidebar */
#sidebar {
background-color: aqua;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
/* sidebar */
#sidebar.show {
display: none;
}
/* Content */
.content {
background-color: bisque;
width: 100%;
height: 100%;
position: inherit;
}
/* Header items */
.burger {
background-color: green;
margin-left: 1em;
}
.logo {
background-color: black;
color: white;
}
.navigation-button {
background-color: aqua;
margin-right: 1em;
}
@media only screen and (min-width: 576px) {
/* Header */
.burger {
display: none;
}
.logo {
margin-left: 1em;
}
/* Page */
.page{
flex-direction: row;
}
/* sidebar */
#sidebar.show{
display: flex;
flex-direction: column;
width: 18em;
height: 100%;
overflow-y: auto;
}
/* Content */
.content{
height: 100%;
width: 100%;
overflow-y: auto;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link type="text/css" rel="stylesheet" href="index.css">
</head>
<body>
<div id="root">
<div class="app">
<div class="header">
<div class="burger" onclick="toggle_sidebar()">Burger</div>
<div class="logo">Logo</div>
<div class="navigation-button">Navigation</div>
</div>
<div class="page">
<div id="sidebar" class="show">
<div>Start</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>SidebarItem</div>
<div>End</div>
</div>
<div class="content">
<div>Start</div>
<div>ContentItem</div>
<div>ContentItem</div>
<div>ContentItem</div>
<div>ContentItem</div>
<div>ContentItem</div>
<div>ContentItem</div>
<div>ContentItem</div>
<div>ContentItem</div>
<div>ContentItem</div>
<div>ContentItem</div>
<div>ContentItem</div>
<div>ContentItem</div>
<div>ContentItem</div>
<div>ContentItem</div>
<div>ContentItem</div>
<div>ContentItem</div>
<div>ContentItem</div>
<div>ContentItem</div>
<div>ContentItem</div>
<div>ContentItem</div>
<div>ContentItem</div>
<div>ContentItem</div>
<div>ContentItem</div>
<div>ContentItem</div>
<div>ContentItem</div>
<div>ContentItem</div>
<div>ContentItem</div>
<div>ContentItem</div>
<div>ContentItem</div>
<div>end</div>
</div>
</div>
</div>
</div>
</body>
<script>
function toggle_sidebar(){
let sidebar = document.getElementById("sidebar");
if(sidebar.classList.contains("show")){
sidebar.classList.remove("show")
} else {
sidebar.classList.add("show")
}
}
</script>
</html>问题是#边栏中有一个显示灵活性，你想对小型设备做的是使其显示：具有高度的块：auto，这样#边栏将占据所需的所有位置，为设备添加此媒体查询<576px，告诉我这对你有用吗！
@media only screen and (max-width: 576px){
#sidebar {
display: block;
height: auto;
}
}