弹性项目的高度不会保持固定

问题描述

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

demo在这里：

在这种情况下，如何确定页眉和页脚高度？

演示版在这里：

解决方案

flex容器的初始设置是。这意味着flex项目可以从其初始大小缩小以保留在容器内（即，它们不能溢出）。

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

您需要禁用 flex-shrink


而不是：



  #header { 
 height：100px; 
 flex-grow：0; 
背景：粉色; 
} 
 
 #footer {
 height：100px; 
 flex-grow：0; 
 background：lightblue; 
 
 $ / code> 

试试这个：



  #header {
 height：100px; 
 flex-grow：0; 
 flex-shrink：0; 
背景：粉色; 
} 
 
 #footer {
 height：100px; 
 flex-grow：0; / *没有必要;默认为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; 
} 
  




I have a page with three rows from top to bottom, fix height header(100px) at the top and fix height footer(100px) at the bottom, the middle take up the rest height.

demo is here: http://jiazhengblog.com/test/flex-study.html

The result is what I expected.

But after I add some contents into the middle row, I found that if contents height is higher than its parents it will make parent height higher than expected. That is the middle area height is a little bit higher and both header and footer height are shortened(less than 100px). When I resize the browser window all rows height are changed.

How can I make the header and footer height fixed in this case?

demo is here: http://jiazhengblog.com/test/flex-study-2.html

解决方案

An initial setting of a flex container is flex-shrink: 1. That means that flex items can shrink from their initial size in order to remain inside the container (i.e., they cannot overflow).

That's what is happening in your code. The header and footer are shrinking to accommodate the height of the content in the middle item.

You need to disable flex-shrink.

Instead of this:

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

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

Try this:

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

Or even better (in terms of efficiency), this:

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

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

这篇关于弹性项目的高度不会保持固定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！