在較寬的屏幕上水平堆疊列，在較小的屏幕上垂直堆疊

Question

我正在努力完成以下任務。 為了示范的目的，我把它愚蠢了：

1. 帶有頁眉，頁腳和2列的頁面
2. 標題始終位於頂部（即垂直位於其余內容之上），高度為20px
3. 頁腳始終位於底部（即垂直位於內容的其余部分下方），高度為20px。
4. 在兩者之間，有兩列
5. 如果視口足夠寬，則會並排顯示2列，並且所有內容都適合視口內部。 A列占75％，B欄占25％。 每個都是（100％ - 40px）高
6. 如果視口不夠寬，則2列呈現在彼此之上，每列100％寬。 A列仍然是（100％-40px）高，B列的高度適合其含量。 該頁面現在有超過1個視口高（當向上滾動時標題可見，並且在完全向下滾動時可見頁腳）
7. 如果內容不適合列，則溢出列內應顯示滾動條

我已經完成了所有的點，除了6號在這里

我不能得到6號工作。 我試過min-width 。 我也嘗試將整個東西“移植”到引導程序（我已經在頁面上使用了引導程序元素）但是這對於某些角度組件（需要輪詢其父級的大小）不能很好地工作;出於某種原因元素然后繼續增長）

我很感激好主意！

編輯我嘗試過使用flexboxes。 它更接近，但是當視口太窄時，視口不會滾動...想法？ 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
• 現在只有兩個主要的flex項目
• 三個內部柔性項目

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容器，因此它始終低於內容列

修訂演示