如何在不为每个孩子增加 100% 高度的情况下让孩子的 flexbox 父母的高度达到 100%答案

【问题标题】：How to make children 100% height of their flexbox parent without adding a 100% height to each child如何在不为每个孩子增加 100% 高度的情况下让孩子的 flexbox 父母的高度达到 100%
【发布时间】：2023-03-22 06:41:02
【问题描述】：

我的网站上有一行嵌套列，它具有引导程序 3。.column 类具有背景。我希望背景颜色填充整个高度而不更改 HTML。

如果我将height: 100%; 添加到嵌套行、bootstrap col 和它们的列类中，我会得到我想要的结果，但是是否可以更轻松地编写它？

这是我的代码

https://codepen.io/Insane415/pen/rZWYOE

<div class="container">
   <div class="row sub-heading">
      <div class="col-xs-12 col-sm-12 col-md-6">
         <div class="column">
            Lorem Ipsum Lorem Ipsum <br>Break
         </div>
      </div>
      <div class="col-xs-12 col-sm-12 col-md-6">
         <div class="row sub-heading full-height">
            <div class="col-xs-4 full-height">
               <div class="column full-height"></div>
            </div>
            <div class="col-xs-4">
               <div class="column"></div>
            </div>
            <div class="col-xs-4">
               <div class="column"></div>
            </div>
         </div>
      </div>
   </div>
</div>

.sub-heading {
  display: flex;
}

.column {
  background: #fce6cc;
  position: relative;
  margin: 0 -13px;
  min-height: 30px;
  padding: 0 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.full-height {
  height: 100%;
}

【问题讨论】：

你也可以用.full-height { height: 100vh;}代替.full-height { height:100%;}
100% 高度是什么？如果您不定义容器的高度（以及任何向上的父母），那么任何孩子都无法知道它应该有多高。
CSS flexbox 可以使用flex: 1 让子标签填充现有空间。

标签： html css twitter-bootstrap-3

【解决方案1】：

根据我的理解，我分享了 sn-p，我希望它对你有帮助

  .sub-heading {
                display: flex;
                    position: relative;
                    min-height: 100%;
                    border: 1px solid #eee;
              }
              
              .column {
                background: #fce6cc;
                position: relative;
                border:1px solid #333;
                margin: 0 -13px;
                min-height: 30px;
                padding: 0 15px;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -ms-flex-wrap: wrap;
                flex-wrap: wrap;
              }
              
              .sub-heading .column{
                min-height: 100%;
              }

<div class="container">
<div class="row sub-heading">
        <div class="col-xs-12 col-sm-12 col-md-6">
          <div class="column">
            Lorem Ipsum Lorem Ipsum <br>Break
          </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6">
          <div class="row sub-heading">
            <div class="col-xs-4">
              <div class="column"></div>
            </div>
            <div class="col-xs-4">
              <div class="column"></div>
            </div>
            <div class="col-xs-4">
              <div class="column"> </div>
            </div>
          </div>
        </div>
      </div>
</div>

【讨论】：

你运行 sn-p 并看到结果了吗？
是的，我已经运行了 sn-p 并看到了结果。如果我理解错了这个问题，我很遗憾，它是关于如何为孩子们获得相等的高度，我正是这样做的，我只是添加了边框以显示它们的高度相同，如果你担心宽度，已经共享的小提琴使用引导程序，所以它会自动处理

【解决方案2】：

不改变 HTML：

.sub-heading {
  height: 100%;
}

.sub-heading > div {
  background: pink;
}

.column {
  position: relative;
  margin: 0 -13px;
  min-height: 30px;
  padding: 0 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

@media screen and (min-width: 768px) {
  .sub-heading {
    display: flex;
  }
  
  .sub-heading > div {
    border-left: 5px solid #fff;
    border-right: 15px solid #fff;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
   <div class="row sub-heading">
      <div class="col-xs-12 col-sm-12 col-md-6">
         <div class="column">
            Lorem Ipsum Lorem Ipsum <br>Break
         </div>
      </div>
      
     <div class="col-xs-12 col-sm-12 col-md-6">
         <div class="row sub-heading full-height">
            <div class="col-xs-4 full-height">
               <div class="column full-height"></div>
            </div>
            <div class="col-xs-4">
               <div class="column"></div>
            </div>
            <div class="col-xs-4">
               <div class="column"></div>
            </div>
         </div>
      </div>
   </div>
</div>

【讨论】：