html - 在已受页面级页眉和页脚限制的内容中添加固定页脚

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 推出屏幕.

这是我到目前为止所做的(此 html 现在位于 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显然应该限制在一定的高度，但我应该设置多少呢？ 100vh 不是一个选项，因为黄色和红色 div 由页眉和页脚限制，100vh 只是让黄色 div 与页面大小相同，而不考虑页面级页眉和页脚，它也会将红色条滚动到 View 之外。

关于如何在黄色 div 展开时防止红色 div 被推离屏幕的任何想法？

编辑:

这个 hack 似乎让它起作用，但不确定为什么 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-main flex-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>