Html Flexbox和左侧边栏覆盖
如何让左侧边栏覆盖内容而不是推送内容?我希望它覆盖在手机上,但推上网页布局。Flexbox对我来说有点新,所以不确定我是否需要一个不同的布局来实现这一点,或者Flexbox是否可以实现这一点?我猜我需要从flexbox中删除侧栏,并使用固定的相对布局 我也使用angular,但为了简单起见,我删除了angular代码,所以请不要介意额外的divHtml Flexbox和左侧边栏覆盖,html,css,flexbox,Html,Css,Flexbox,如何让左侧边栏覆盖内容而不是推送内容?我希望它覆盖在手机上,但推上网页布局。Flexbox对我来说有点新,所以不确定我是否需要一个不同的布局来实现这一点,或者Flexbox是否可以实现这一点?我猜我需要从flexbox中删除侧栏,并使用固定的相对布局 我也使用angular,但为了简单起见,我删除了angular代码,所以请不要介意额外的div <div class="wrapper"> <header class="header">
<div class="wrapper">
<header class="header">
header
</header>
<div class="main">
<div class="left-sidebar">
left sidebar
</div>
<div class="main-content-wrapper">
<div class="main-content">
<h3>Main </h3>
</div>
<footer class="footer">
<p>content</p>
<p>content</p>
<p>content</p>
</footer>
</div>
</div>
</div>
body,
html {
height: 100%;
overflow: hidden;
}
header {
min-height: 60px;
flex: none;
width: 100%;
background-color: silver;
}
.wrapper {
height: 100vh;
display: flex;
flex-direction: column;
.main {
flex: 1;
display: flex;
.main-content-wrapper {
display: flex;
flex: 1;
flex-direction: column;
overflow: auto;
.main-content {
padding: 2rem;
flex: 1;
background-color: antiquewhite;
}
footer {
background-color: silver;
min-height: 300px;
flex-shrink: 0;
}
}
}
}
.left-sidebar {
width: 0;
height: 100%;
overflow: auto;
flex: none;
&.active {
width: 250px;
}
.left-sidebar-content {
padding: 1rem;
}
}
标题
左侧边栏
主要的
内容
内容
内容
身体
html{
身高:100%;
溢出:隐藏;
}
标题{
最小高度:60px;
flex:无;
宽度:100%;
背景颜色:银色;
}
.包装纸{
高度:100vh;
显示器:flex;
弯曲方向:立柱;
梅因先生{
弹性:1;
显示器:flex;
.主要内容包装{
显示器:flex;
弹性:1;
弯曲方向:立柱;
溢出:自动;
.主要内容{
填充:2rem;
弹性:1;
背景色:仿古白色;
}
页脚{
背景颜色:银色;
最小高度:300px;
弹性收缩:0;
}
}
}
}
.左侧边栏{
宽度:0;
身高:100%;
溢出:自动;
flex:无;
&.主动{
宽度:250px;
}
.左侧边栏内容{
填充:1rem;
}
}
试试这个,我实际上制作了一个新的结构,虽然与您的结构没有太大的不同(确实删除了一些元素,只是为了使用更少的代码);我使用flexbox使整个包装成为flex容器,并使用媒体查询指示边栏何时应将内容推到一边,以及何时将内容与覆盖重叠
document.getElementById('toggleBtn')。onclick=function(){
document.getElementById('sidebar').classList.toggle('active');
document.getElementById('overlay').classList.toggle('hidden');
}
document.getElementById('overlay')。onclick=function(){
document.getElementById('overlay').classList.toggle('hidden');
document.getElementById('sidebar').classList.toggle('active');
}
正文{
保证金:0;
}
.包装纸{
显示器:flex;
对齐项目:拉伸;
高度:100vh;
}
.主要内容包装{
宽度:100%;
}
#边栏{
最小宽度:230px;
最大宽度:230px;
背景颜色:浅灰色;
过渡:均为0.3秒;
高度:100vh;
左边距:-230px;
/*顶层*/
z指数:3
}
#侧边栏{
左边距:0px;
}
@介质(最大宽度:580像素){
#边栏{
位置:固定;
排名:0;
/*顶层*/
z指数:3
}
.覆盖{
背景色:rgba(0,0,0,0.425);
宽度:100vw;
高度:100vh;
z指数:2;
排名:0;
左:0;
位置:绝对位置;
}
.隐藏{
显示:无;
}
}
左侧边栏
主要的
切换
如何实现边栏作为覆盖?如果在较小的屏幕上运行此代码段,您将看到边栏作为覆盖,您可以检查在代码段的媒体查询中声明的样式,这就是我用来更改边栏行为的方式