提问者:小点点

自动填充弹性列中的组件高度[重复]


我在做布局。

null

.container{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  background-color: gray;
}
.header{
  width: 100%;
  height: 80px;
  background-color: red;
}

.content{
  align-self: stretch;
  width: 100%;
  background-color: blue;
}
<div class="container">
  <div class="header">
    Header
  </div>
  <div class="content">
    Be filled the rest part
  </div> 
</div>

null

我所期望的

条件

我不想在CSS中使用calc(),因为标头的高度可能是动态的。


共1个答案

匿名用户

flex-grow:1;添加到.content

null

.container{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  background-color: gray;
}
.header{
  width: 100%;
  height: 80px;
  background-color: red;
}

.content{
  align-self: stretch;
  width: 100%;
  background-color: blue;
  flex-grow: 1; /* Add this line */
}
<div class="container">
  <div class="header">
    Header
  </div>
  <div class="content">
    Be filled the rest part
  </div> 
</div>