使用flexbox实现固定高度容器固定在页面底部，剩余空间自适应不生效如何解决

问题原因 #

你给.container设置的height: 100%为相对父元素的百分比高度，默认状态下html、body元素的高度由内容撑开，没有显式指定为满视口高度，导致.container无法撑满整个页面，flex的剩余空间分配逻辑无法生效。

修复方案 #

在原有CSS基础上补充根元素的高度和边距重置即可：

<div class="container"> 
  <div class="one">One</div>
  <div class="two">Two</div>
</div> 

/* 新增根元素样式 */
html, body {
  height: 100%;
  margin: 0;
}
.container {
   height: 100%;
   display: flex;
   flex-direction: column;
   background: black;
}
.one { 
   flex-grow: 1;
   background: green;
}
.two {
    height: 90px;
    background:pink;
}

可选优化 #

如果需要.two永远固定在视口底部，不受页面滚动影响，可以额外给.two添加以下属性：

.two {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  /* 同时给.one添加padding-bottom: 90px，避免内容被底部遮挡 */
}

内容的提问来源于stack exchange，提问作者user15909643