gpt4 book ai didi

html - 如何在不为每个 child 添加 100% 高度的情况下使 child 的 100% 高度成为其 flexbox parent 的高度

转载 作者:行者123 更新时间:2023-11-28 01:11:10 25 4
gpt4 key购买 nike

我的网站上有一行嵌套列,它有 Bootstrap 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>

关于html - 如何在不为每个 child 添加 100% 高度的情况下使 child 的 100% 高度成为其 flexbox parent 的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52094153/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com