Flexbox侧栏停止主要内容在小屏幕上隐藏在侧边栏下

问题描述

我有一个工作良好的主要内容的边栏...问题在于，我使用的引导类是 .container 。

当前行为

当我收缩我的页面时，主要内容会弹出到我的侧栏下。

期望的行为

我希望.container缩小，和主要内容适合在屏幕上。

我的代码

标记：

 <！ -  site footer  - > 
< div class =footer> 
< div class =footer-group footer-group-left> 
< span> 
幻灯片1/10 
< / span> 
< span> 
< i class =fa fa-user>< / i> 
& nbsp; 2位用户连接了
< / span> 
< / div> 
< div class =footer-group footer-group-center> 
< a href =＃> 
< i class =fa fa-arrow-left>< / i> 
< / a> 
< a href =＃> 
< i class =fa fa-arrow-right>< / i> 
< / a> 
< / div> 
< div class =footer-group footer-group-right> 
< a class =text-successhref =＃> 
< i class =fa fa-check>< / i> 
< / a> 
< a class =text-dangerhref =＃> 
< i class =fa fa-times>< / i> 
< / a> 
< span> 
 00:00 
< / span> 
< / div> 
< / div> 
   

CSS

  body {
 background：#fafafa; 
 box-shadow：0 0 5rem rgba（0，0，0，0.25）inset; 
 display：flex; 
 flex-wrap：wrap; 
最小高度：100vh; 
保证金：0; 
 overflow-x：hidden; 
} 
 
 / *聊天箱* / 
 .chatbox {
背景：白色; 
 display：flex; 
 flex：0 0 300px; 
 flex-direction：column; 
 height：calc（100vh  -  60px）; 
 margin-left：-300px; 
 
 -webkit-box-shadow：0px 0px 30px -10px rgba（0,0,0,0.75）; 
 -moz-box-shadow：0px 0px 30px -10px rgba（0,0,0,0.75）; 
 box-shadow：0px 0px 30px -10px rgba（0,0,0,0.75）; 
转换：保证金0.2s缓解0s; 
} 
 .chatbox.toggled {
 margin-left：0px; 
} 
 .chatbox-tab {
 top：30px; 
 padding：10px; 
位置：绝对; 
 color：#ffffff; 
背景：＃393B3C; 
 border-right-right-radius：10px; 
 border-bottom-right-radius：10px; 
 border-right：4px solid＃535353; 
过渡：背景0.2s缓解0s; 
} 
 .chatbox-tab：hover {
 background：＃555555; 
光标：指针; 
} 
 .chatbox-content {
 padding：15px; 
 flex：1; 
 overflow-x：hidden; 
 overflow-y：hidden; 
} 
 .chatbox-content：hover {
 overflow-y：auto; 
} 
 .chatbox-footer {
 / * align-self：flex-end; * / 
 display：flex; 
 border-top：1px solid #eeeeee; 
 / * height：100px; * / 
} 
 .chatbox-footer input {
 flex：1; 
保证金：0; 
 padding：10px; 
 border：none; 
} 
 .chatbox页脚按钮{
背景：＃7cd97c; 
 color：#ffffff; 
保证金：0; 
 padding：0; 
 border：none; 
 padding：10px 15px 10px 15px; 
} 
 .chatbox-footer button：hover {
 background：＃5bb85b; 
光标：指针; 
} 
 
 / *主要内容* / 
 .content {
 display：flex; 
 flex：1; 
 align-items：center; / *垂直居中* / 
 justify-content：center; / * horizo​​ntal：centering * / 
 height：calc（100vh  -  60px）; 
} 
 
 / *页脚工具栏* / 
 .footer {
背景：＃292B2C; 
 display：flex; 
弹性基础：100％; 
 height：60px; 
 padding：0 20px 0 20px; 
} 
 .footer-group {
 flex：1; 
 display：flex; 
} 
 .footer-group-left {
 justify-content：flex-start; 
} 
 .footer-group-center {
 justify-content：center; 
 
} 
 .footer-group-right {
 justify-content：flex-end; 
 
} 
 .footer-group a，.footer-group span {
 padding：0 20px 0 20px; 
 color：#ffffff; 
 text-decoration：none; 
 align-self：stretch; 
 display：flex; 
 align-items：center; 
} 
 .footer-group a：hover {
 background：＃444444; 
} 
  

解决方案

因为这个内容的宽度是 100％，并且旁边菜单的边缘被压低。

解决方案是在切换旁边时减少内容的宽度。

在切换旁边时切换class .toggled 到 .content 类，并应用此 css ：

  .content.toggled {
 width： calc（100％ -  300px）; 
 
  

这是一个更新的小提琴：

I have a sidebar with main content that is working great... the problem is that for the main-content I am using the bootstrap class .container.

Current behaviour

When I shrink my page the main content pops underneath my sidebar.

Desired behaviour

I want the .container to shrink so that the sidebar and main-content fit on the screen.

My Code

https://jsfiddle.net/4jm70ton/

Markup:

<!-- site footer -->
<div class="footer">
    <div class="footer-group footer-group-left">
        <span>
            Slide 1/10
        </span>
        <span>
            <i class="fa fa-user"></i>
            &nbsp; 2 users connected
        </span>
    </div>
    <div class="footer-group footer-group-center">
        <a href="#">
            <i class="fa fa-arrow-left"></i>
        </a>
        <a href="#">
            <i class="fa fa-arrow-right"></i>
        </a>
    </div>
    <div class="footer-group footer-group-right">
        <a class="text-success" href="#">
            <i class="fa fa-check"></i>
        </a>
        <a class="text-danger" href="#">
            <i class="fa fa-times"></i>
        </a>
        <span>
            00:00
        </span>
    </div>
</div>
<!-- end site footer -->

CSS

body {
    background: #fafafa;
    box-shadow: 0 0 5rem rgba(0, 0, 0, 0.25) inset;
    display: flex;
    flex-wrap: wrap;
    min-height: 100vh;
    margin: 0;
    overflow-x:hidden;
}

/* chatbox */
.chatbox {
    background: white;
    display: flex;
    flex: 0 0 300px;
    flex-direction: column;
    height: calc(100vh - 60px);
    margin-left:-300px;

    -webkit-box-shadow: 0px 0px 30px -10px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 30px -10px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 30px -10px rgba(0,0,0,0.75);
    transition: margin 0.2s ease 0s;
}
.chatbox.toggled {
    margin-left: 0px;
}
.chatbox-tab {
    top: 30px;
    padding: 10px;
    position: absolute;
    color: #ffffff;
    background: #393B3C;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-right: 4px solid #535353;
    transition: background 0.2s ease 0s;
}
.chatbox-tab:hover {
    background: #555555;
    cursor: pointer;
}
.chatbox-content {
    padding: 15px;
    flex: 1;
    overflow-x: hidden;
    overflow-y: hidden;
}
.chatbox-content:hover {
    overflow-y: auto;
}
.chatbox-footer {
    /*align-self:flex-end;*/
    display:flex;
    border-top:1px solid #eeeeee;
    /*height: 100px;*/
}
.chatbox-footer input {
    flex: 1;
    margin: 0;
    padding:10px;
    border: none;
}
.chatbox-footer button {
    background: #7cd97c;
    color: #ffffff;
    margin: 0;
    padding: 0;
    border: none;
    padding: 10px 15px 10px 15px;
}
.chatbox-footer button:hover {
    background: #5bb85b;
    cursor: pointer;
}

/* main content */
.content {
    display: flex;
    flex: 1;
    align-items: center; /* vertical centering */
    justify-content: center; /* horizontal: centering */
    height: calc(100vh - 60px);
}

/* footer toolbar */
.footer {
    background: #292B2C;
    display: flex;
    flex-basis: 100%;
    height: 60px;
    padding: 0 20px 0 20px ;
}
.footer-group {
    flex: 1;
    display: flex;
}
.footer-group-left {
    justify-content:flex-start;
}
.footer-group-center {
    justify-content:center;

}
.footer-group-right {
    justify-content:flex-end;

}
.footer-group a, .footer-group span {
    padding: 0 20px 0 20px;
    color: #ffffff;
    text-decoration: none;
    align-self:stretch;
    display: flex;
    align-items: center;
}
.footer-group a:hover {
    background: #444444;
}

解决方案

The content is going underneath, becuase the width of this content is 100%, and the margin of the aside menu is pushing down.
The solution is to decrease width of content when aside is toggled.
Toggle class .toggled to .content class when the aside is toggled, and apply this css:

.content.toggled {
  width: calc(100% - 300px);
}

Here is an updated fiddle: fiddle

这篇关于Flexbox侧栏停止主要内容在小屏幕上隐藏在侧边栏下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！