Question

我试图完成以下操作。为了演示的目的，我把它愚蠢了：

包含页眉，页脚和2列的页面
标题始终位于顶部（即垂直位于其余内容之上），高度为20px
页脚始终位于底部（即垂直位于内容的其余部分下方），高度为20px。
介于两者之间，有两列
如果视口足够宽，则会并排显示2列，并且所有内容都适合视口内部。 A列占75％，B栏占25％。每个都是（100％ - 40px）高
如果视口不够宽，则2列呈现在彼此之上，每列100％宽。 A列仍然是（100％-40px）高，B列的高度适合其含量。该页面现在有超过1个视口高（当向上滚动时标题可见，并且在完全向下滚动时可见页脚）
如果内容不适合列，则滚动条应显示在里面溢出列

我已经完成了除了6号here

我不能让6号工作。我试过了min-width。我也尝试过＃port;＆＃39;引导程序的全部内容（我已经在页面上使用了引导程序元素），但这并不能很好地处理一些角度组件（需要轮询其父级的大小;由于某种原因，该元素然后继续增长）

我很感激好主意！

修改我尝试过使用flexbox。它越来越近了，但是当视口太狭窄时，视口不会滚动...想法？ 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

更新（基于评论）

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

注意：

移除固定高度（限制在较小屏幕上的页脚定位）
将内页添加到内部灵活容器中，因此它始终位于内容列

Revised Demo

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

1 个答案: