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

Question

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

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

除了第 6 点here，我已经完成了所有点

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

如果有好主意，我将不胜感激！

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

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

Answer 1

布局可以使用 flexbox。这就是你所需要的：

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; } }

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

DEMO

---

更新（基于 cmets）

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;  }
}

注意事项：

• 移除了固定高度（限制页脚在小屏幕上的定位）
• 为内部 flex 容器添加了页脚，使其始终位于内容列下方

Revised Demo