Question

我有一个使用列flexbox的网页，其中包含固定大小的页眉和页脚，以及占用剩余空间的内容区域。这很好。

内容区域是行flexbox，我有2个方格div并排。我通过使用填充底部使它们成为正方形。除非窗口大于内容区域高度的2倍，否则这样可以正常工作。然后我的方块开始流入页脚，因为填充基于元素宽度。

我希望广场永远不会与页脚重叠。我在那里只是在广场右边有死角。我想坚持使用flexbox并尽可能避免浮动。只需要支持现代浏览器。

这只能用CSS吗？或者这是JS的工作。

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#box {
    display: flex;
    flex-flow: column;
    height: 100%;
}
div {
    border: 1px solid tomato;
    box-sizing: border-box;
    margin: 0;
    padding: 2px;
}
#header {
    flex: 0 0 5em;
}
#footer {
    flex: 0 0 5em;
}
#content {
    background: blue;
    display: flex;
    flex: 1 1 auto;
    flex-flow: row wrap;
    min-height: 30%;
}
#content > div {
    background: tomato;
    border-color: black;
    flex: 1 0 auto;
    max-height: 50%;
    padding-bottom: 50%;
}

<div id="box">
<div id="header">
    <p><b>header</b>
    </p>
</div>
<div id="content">
    <div id='am'></div>
    <div id='pm'></div>
</div>
<div id="footer">
    <p><b>footer</b>
    </p>
</div>
</div>

TIA！

Answer 1

简单的解决方案：

#box
{
    display: flex;
    flex-flow: column;
    min-height: 100%; /* this*/
}

JSfiddle Demo

注意：这假设您希望页面溢出...但我没有看到任何对视口包含页面高度的引用。

Flexbox - 不能将内容区域中的div与重叠页脚保持一致

1 个答案: