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

现在我试图展示内容，但有一个＆＃34;页脚＆＃34;在内容中保留的内容：

我设法在那里得到一个红色页脚，而黄色内容填满了屏幕的其余部分，但是当黄色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与页面大小相同而不考虑页面级页眉和页脚这也会将红色条滚动到视线之外。

当黄色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和{{1} }。

然后我给了content-footer content-main所以它填补了flex-grow: 1占据空间后剩下的剩余部分。

最后，为了避免content-footer被推开，我使用绝对定位添加了一个内部元素content-footer。

内部content-scroller不一定是必要的，但是只有在content-scroller上设置overflow: auto，所有浏览器，但Chrome都不行，所以要使其适用于所有元素是必需的。

好的部分是，它在响应性等方面不会以任何负面方式影响解决方案。

Fiddle demo

Stack snippet

content-main

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

在已经被页面级页眉和页脚限制的内容中添加固定页脚

1 个答案: