将固定页脚添加到已由页面级页眉和页脚限定的内容中

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>