Question

我正在尝试学习CSS，为此，我试图创建响应式HTML + CSS页面。我的问题是，在移动设备（宽度<576px）上，我想隐藏边栏并仅在用户单击标题中的汉堡项目（仅当宽度<576px时可见）时才打开侧边栏。问题在于，带有项的内容div在打开时会与该侧边栏重叠。像这样：Overlapping

您能帮我解决这个问题吗？我不知道如何解决这个问题。这是我的代码段：

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>

Answer 1

问题是#sidebar中具有显示柔性，您要在小型设备上执行的操作是将display：block设置为height：auto，这样#sidebar将占据所有需要的位置，添加此媒体查询设备<576px，然后告诉我是否对您有用！

@media only screen and (max-width: 576px){
  #sidebar {
      display: block;
      height: auto;
    }
}

div的CSS定位

1 个答案: