html - 如何在不为每个孩子增加 100% 高度的情况下让孩子的 flexbox 父母的高度达到 100%
问题描述
我的网站上有一行嵌套列,它具有引导程序 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%;
}
解决方案
在不更改 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>
推荐阅读
- c - 分段错误 - 最长公共前缀分而治之
- sql - 在 T-SQL 中以领先或落后循环遍历表以创建订阅系列
- python - 类型错误:'在
' 需要字符串作为左操作数,而不是 re.Pattern - python - 使用 geopandas multilinestring 从 xarray 数据集中提取值
- tensorflow - 使用 PySpark 编写 tensorflow-ranking ELWC 格式
- javascript - 通过 Javascript 中的多个函数传递参数
- firebase - firebase 是否处理来自表单的代码注入
- css - 使用 flex 布局的仅行中的 angular 7 mat-card
- akka - 为什么actorSystem没有创建要使用自定义调度程序运行的actor
- javascript - 在服务器和客户端之间访问 JS 文件中的变量