在较宽的屏幕上水平堆叠列，在较小的屏幕上垂直堆叠列

Question

我正在尝试完成以下任务。为了演示的目的，我把它弄糊涂了：

1. 包含页眉、页脚和 2 列的页面
2. 标题始终位于顶部（即垂直高于内容的其余部分），高度为 20px
3. 页脚始终位于底部（即，垂直低于内容的其余部分），高度为 20px。
4. 在两者之间，有 2 列
如果视口
5. 足够宽，则 2 列将并排显示，并且所有内容都适合视口。A 列占 75%，B 列占 25%。每个都是 （100% - 40px） 高
6. 如果视口不够宽，则 2 列彼此重叠显示，每列 100% 宽。列 A 仍然 （100%-40px） 高，B 列的高度适合其内容。页面现在超过 1 个视口高度（页眉在一直向上滚动时可见，页脚在一直向下滚动时可见）
7. 如果内容不适合列，则溢出列内应显示滚动条

我已经完成了除第 6 点之外的所有要点

我不能让 6 号工作。我试过min-width.我还尝试将整个东西"移植"到引导程序（我已经在页面上使用了引导元素），但这不适用于一些角度组件（需要轮询其父级的大小;由于某种原因，元素然后不断增长）

我会很感激好的想法！

编辑我试过使用弹性框。它更近了，但是当视口变得太窄时不会滚动......想法？https://jsfiddle.net/498xpp6n/2/

编辑我考虑了一下，并在进入堆叠模式时对所需的列高度进行了一些更改。希望这不会毁了某人的一天

Answer 1

可以使用

弹性框进行布局。这就是您所需要的：

.HTML

<div id="outer-flex-container"><!-- primary flex container -->
    <div id="header">The Header The Header The Header ... </div><!-- flex item #1 -->
    <div id="inner-flex-container"><!-- flex item #2 -->
        <div id="mainpanel">Mainpanel Mainpanel Mainpanel Mainpanel Mainpanel ... </div>
        <div id="aside">settings settings settings settings settings settings ... </div>
    </div><!-- end #inner-flex-container -->
    <div id="footer">The Footer The Footer The Footer ... </div><!-- flex item #3 -->
</div><!-- end #outer-flex-container -->

.CSS

html { height: 100%; }
body { height: 100%; margin: 0; }
#outer-flex-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}
#inner-flex-container {
    display: flex;
    height: calc(100% - 40px);
}
#header { height: 20px; }
#footer { height: 20px; }
#mainpanel { flex: 0 0 75%; }
#aside { flex: 1; overflow-y: scroll; }
@media screen and ( max-width: 500px) { #inner-flex-container { flex-direction: column; } }

我相信上面的代码涵盖了您问题中的所有七点：-）

演示

---

更新（基于评论）

.HTML

<div id="outer-flex-container"><!-- primary flex container -->
    <div id="header">The Header The Header The Header ... </div><!-- flex item #1 -->
    <div id="inner-flex-container"><!-- flex item #2 -->
        <div id="mainpanel">Mainpanel Mainpanel Mainpanel Mainpanel Mainpanel ... </div>
        <div id="aside">settings settings settings settings settings settings ... </div>
        <div id="footer">The Footer The Footer The Footer ... </div>
    </div><!-- end #inner-flex-container -->
</div><!-- end #outer-flex-container -->

笔记：

• 将页脚移至.inner-flex-container
• 现在只有两个主要的弹性项目
• 三个内部弹性项目

.CSS

body {  margin: 0; }
#outer-flex-container {
    display: flex;
    flex-direction: column;     
}
#inner-flex-container {
    display: flex;
    flex-wrap: wrap;
}
#header { height: 20px; }
#mainpanel {
    flex: 0 0 75%;
    height: calc(100vh - 40px);
    min-height: calc(100vh - 40px);
    overflow-y: auto; 
}
#aside {
    flex: 0 0 25%;
    height: calc(100vh - 40px);
    overflow-y: auto;
}
#footer {
    flex-basis: 100%;
    height: 20px;
}
@media screen and ( max-width: 500px) {
    #inner-flex-container  { flex-direction: column; }
    #mainpanel { height: 100vh; }
    #aside { height: auto;  }
}

笔记：

• 删除了固定高度（限制了页脚在较小屏幕上的位置）
• 将页脚添加到内部弹性容器，使其始终位于内容列下方

修订后的演示