將固定頁腳添加到已由頁面級頁眉和頁腳限定的內容中

Question

我使用flexbox構建佈局;獲取頁面級頁眉和頁腳以保持原位很容易，因此可以在頁眉和頁腳之間的區域顯示列。

<div class="vbox fill" > 
    <header class="header"> 

    </header> 
    <div class="hbox expand no-padding no-margin"> 
     <div class="column1 vbox"></div> 
     <div class="column2 vbox"></div> 
     <div class="content vbox"> 
      Content Here  
     </div>    
     <div class="column4 vbox"></div> 
     <div class="column5 vbox"></div> 
    </div> 
    <footer class="footer"> 

    </footer> 
</div> 

CSS：

.vbox { 
    display: flex; 
    flex-direction: column; 
    margin: 0; 
    padding: 0; 
} 

.hbox { 
    display: flex; 
    flex-direction: row; 
    margin: 0; 
    padding: 0; 
} 

.expand { 
    flex: 1 1 100%; 
    width: 100%; 
    height: 1%; 
} 

.fill { 
    height: 100vh; 
} 

現在我想顯示的內容，但有一個 「頁腳」 留在地方里面的內容：

我已經設法在那裏得到一個紅色的頁腳，而黃色的內容填滿了屏幕的其餘部分，但是當黃色的div由於太多的數據而膨脹時，它會將紅色的div推出屏幕wi一個滾動條。

這是我到目前爲止已經完成（這個網站現在坐在這裏的Content Here節）

CSS：

.row1 { 
     flex: 1 1 auto; 
     background-color: yellow; 
    } 
    .row2 { 
     flex: 0 0 50px; 
     background-color: red; 
    } 

HTML：

<div class="row1" *contentItem> 
     TEST1 
    </div> 
    <div class="row2" *contentItem> 
     TEST2 
    </div> 

黃色div顯然應該限制在某個h八，但我應該設置多少？ 100vh不是一個選項，因爲黃色和紅色div由頁眉和頁腳限定，並且100vh只需使黃色div與頁面大小相同，而不考慮頁面級頁眉和頁腳，該頁面級別頁眉和頁腳也滾動出紅色欄視圖。

關於如何在黃色div展開時保持紅色div不被屏幕推出的任何想法？

編輯：

這個技巧似乎使其工作，不知道爲什麼1％的事情使得它的工作：

.row1 { 
    flex: 1 1 auto; 
    overflow: auto; 
    height: 1%; 
} 

.row2 { 
    flex: 0 0 auto; 

}

Answer 1

試圖瞭解你，但我不完全確定，所以想知道這是你在找什麼？

我所做的是2個新的元素（row1/row2）添加到您的初始content元素，但我打電話給他們content-main和content-footer。

然後，我給了content-mainflex-grow: 1所以它填補剩下的東西之後留下的剩餘部分content-footer佔用了它的空間。

最後，爲了避免content-footer被推開，我添加了一個使用絕對定位的內部元素content-scroller。

內content-scroller不應該是必要的，但所有的瀏覽器而Chrome是不行的用簡單的content-main設置overflow: auto，所以使它在所有的工作，這需要額外的元素。

好部分是，當談到對反應能力等

Fiddle demo

棧片斷它不會影響任何消極的方式解決

html, body { 
 
    margin: 0; 
 
} 
 
.vbox { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.hbox { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 
.expand { 
 
    flex-grow: 1; 
 
    width: 100%; 
 
} 
 
.expand .content { 
 
    flex-grow: 1; 
 
} 
 
.expand .content .content-main { 
 
    position: relative; 
 
    flex-grow: 1; 
 
    background: lime; 
 
} 
 
.expand .content .content-main .content-scroller { 
 
    position: absolute; 
 
    left: 0; top: 0; 
 
    height: 100%; width: 100%; 
 
    background: yellow; 
 
    overflow: auto; 
 
} 
 
.expand .content .content-footer { 
 
    background: red; 
 
} 
 
.fill { 
 
    height: 100vh; 
 
}

<div class="vbox fill"> 
 
    <header class="header"> 
 
    Header 
 
    </header> 
 
    <div class="hbox expand no-padding no-margin"> 
 
    <div class="column1 vbox"> Col 1 </div> 
 
    <div class="column2 vbox"> Col 2 </div> 
 
    <div class="content vbox">  
 
     <div class="content-main"> 
 
     <div class="content-scroller"> 
 
     Content Here<br> 
 
     Content Here<br> 
 
     Content Here<br> 
 
     Content Here<br> 
 
     Content Here<br> 
 
     Content Here<br> 
 
     Content Here<br> 
 
     Content Here<br> 
 
     Content Here<br> 
 
     Content Here<br> 
 
     Content Here<br> 
 
     Content Here<br> 
 
     Content Here<br> 
 
     Content Here<br>   
 
     Content Here<br> 
 
     Content Here<br> 
 
     Content Here<br> 
 
     Content Here<br> 
 
     Content Here<br> 
 
     Content Here<br> 
 
     Content Here<br> 
 
     Content Here<br> 
 
     Content Here<br> 
 
     </div>  
 
     </div>  
 
     <div class="content-footer"> 
 
     Content Footer 
 
     </div>  
 
    </div> 
 
    <div class="column4 vbox"> Col 4 </div> 
 
    <div class="column5 vbox"> Col 5 </div> 
 
    </div> 
 
    <footer class="footer"> 
 
    Footer 
 
    </footer> 
 
</div>