弹性物品的高度没有保持固定

Question

我有一个从上到下有三行的页面，在顶部固定高度标题（100px）并在底部固定高度页脚（100px），中间占据剩余高度。

演示在这里：http://jiazhengblog.com/test/flex-study.html

结果就是我的预期。

但是在我将一些内容添加到中间行后，我发现如果内容高度高于其父级，则会使父级高于预期。这是中间区域高度略高，页眉和页脚高度都缩短（小于100px）。当我调整浏览器窗口的大小时，所有行的高度都会改变。

如何在这种情况下修改页眉和页脚高度？

演示在这里：http://jiazhengblog.com/test/flex-study-2.html

Answer 1

弹性容器的初始设置为flex-shrink: 1。这意味着弹性项目可以从其初始大小缩小，以便保留在容器内（即，它们不会溢出）。

这就是您的代码中发生的事情。页眉和页脚缩小以适应中间项目中内容的高度。

您需要停用flex-shrink。

而不是：

#header {
    height: 100px;
    flex-grow: 0;
    background: pink;
}

#footer {
    height: 100px;
    flex-grow: 0;
    background: lightblue;
}

试试这个：

#header {
    height: 100px;
    flex-grow: 0;
    flex-shrink: 0;
    background: pink;
}

#footer {
    height: 100px;
    flex-grow: 0; /* not really necessary; default is 0 */
    flex-shrink: 0;
    background: lightblue;
}

甚至更好（在效率方面），这：

#header {
    flex: 0 0 100px; /* flex-grow, flex-shrink, flex-basis */
    background: pink;
}

#footer {
    flex: 0 0 100px;
    background: lightblue;
}

Answer 2

你可以在页眉和页脚中使用min-height来达到这个目的：

#header {
    background: pink;
    height: 100px;
    flex-grow: 0;
    min-height: 100px;
}

#footer {
    background: lightblue;
    height: 100px;
    flex-grow: 0;
    min-height: 100px;
}