Html 在'；已由页级页眉和页脚限定

我正在使用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>

现在，我尝试显示内容，但在内容中有一个“页脚”保持不变：

当黄色内容填满屏幕的其余部分时，我成功地在其中获得了一个红色的页脚，但是当黄色div由于太多数据而扩展时，它会用一个滚动条将红色div推出屏幕

这就是我到目前为止所做的（这个html现在位于

内容所在的位置

部分）

CSS:

HTML:

---

}

试图理解你，但我不能完全确定，所以想知道这是否是你想要的

我所做的是将两个新元素（

row1

/

row2

）添加到初始的

content

元素中，尽管我称它们为

content main

和

content footer

然后我给了

contentmain

flex-grow:1

，这样它就填满了

contentfooter

占用空间后剩下的部分

最后，为了避免内容页脚被推开，我添加了一个内部元素，

contentscroller

，使用绝对定位

内部的

内容滚动条

应该是不必要的，尽管除了Chrome以外的所有浏览器都不能简单地在

内容主目录

上设置

溢出：自动

，因此为了使它在所有浏览器上都能工作，需要额外的元素

好的方面是，当涉及到响应性等问题时，它不会以任何负面的方式影响解决方案

堆栈片段

html，正文{
保证金：0；
}
.vbox{
显示器：flex；
弯曲方向：立柱；
}
.hbox{
显示器：flex；
弯曲方向：行；
}
.扩大{
柔性生长：1；
宽度：100%；
}
.expand.content{
柔性生长：1；
}
.expand.content.content main{
位置：相对位置；
柔性生长：1；
背景：石灰；
}
.expand.content.content main.content滚动条{
位置：绝对位置；
左：0；上：0；
高度：100%；宽度：100%；
背景：黄色；
溢出：自动；
}
.expand.content.content页脚{
背景：红色；
}
.填充{
高度：100vh；
}

标题
第1列
第2列
此处的内容

此处的内容

此处的内容

此处的内容

此处的内容

此处的内容

此处的内容

此处的内容

此处的内容

此处的内容

此处的内容

此处的内容

此处的内容

此处的内容

此处的内容

此处的内容

此处的内容

此处的内容

此处的内容

此处的内容

此处的内容

此处的内容

此处的内容

内容页脚
第4列
第5列
页脚

是的，这正是我想要的。需要先消化CSS，我对CSS还比较陌生flexbox@JanVladimirMostert太好了…只是补充了一些解释。让我知道如果你需要更多的信息，我得到它与1%的高度+超低自动黑客，不知道为什么它的工作。我会研究你的解决方案并正确实施。@Janvladimirmoster你有没有尝试过跨浏览器的黑客攻击。。。我在我的回答中又写了一段文字来解释这一点issue@JanVladimirMostert在Firefox上尝试过这种攻击，但没有成功。在Chrome上，您不需要任何黑客攻击，它不需要

内容滚动条

，如下所示：

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

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

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

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

.row2 {
  flex: 0 0 auto;