我正在研究基于响应式列的布局，每列包含不同长度的文本。 我正在使用引导网格来获得响应能力，但我在全屏模式下为每列设置内部 div 的高度时遇到问题。 我需要从类似的stack-overflow question借来与这张图片类似的东西.
我能找到的解决方案在我的案例中不起作用，因为我正在处理 outer 的孙子的高度。
下面是简化版的 HTML 和 CSS 代码。 (对于这个例子，我删除了不必要的样式和标签。)我需要“.campaign-description”div 的高度来占据“.campaign-block”div 的完整高度。
用这种布局甚至可以做到吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<style>
.align-center {
text-align: center;
}
.grid {
display:flex;
}
@media screen and (max-width: 450px){
.grid {
display : block;
}
}
.campaign-block {
flex:1;
border: 1px solid;
}
.campaign-description {
flex:1;
background-color: #a05b4e;
color: #ffffff;
}
</style>
</head>
<body>
<section>
<div class="row">
<div class="col-sm-12 align-center">
<div class="align-center">
<b>Atape tehe migicur miesa telalem yiso ipipire;</b>
</div>
<div class="row grid">
<div class="col-xs-12 col-sm-6 align-center campaign-block">
<div class="st-smc-offer-image">
<img src="https://static3.grsites.com/archive/textures/misc/misc285.jpg" />
</div>
<div class="campaign-description">
Text <br />
Text <br />
Text <br />
Text <br />
<div>
<a href="http://google.com">Do smth</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 align-center campaign-block">
<div class="st-smc-offer-image">
<img src="https://static3.grsites.com/archive/textures/misc/misc285.jpg" />
</div>
<div class="campaign-description">
Text <br />
Text <br />
Text <br />
Text <br />
Text <br />
Text <br />
Text <br />
Text <br />
<div>
<a href="http://google.com">Do smth</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
最佳答案
据我所知，Flexbox只能在父子之间起作用，不能在父孙之间起作用。这意味着 Flexbox 设置在 <div class="row grid"> 上不直接影响其孙子，<div class="campaign-block"> .
实现.campaign-description占用底部剩余空间，可以在.campaign-block上引入Flexbox并设置 flex-direction: column所以它的 child 从上到下显示。
然后，.campaign-description应该占用底部的剩余空间，因为 flex: 1 , 或 flex-grow: 1 , 会告诉它展开。
.align-center {
text-align: center;
}
.grid {
display: flex;
}
.campaign-block {
/* Introduce Flexbox */
display: flex;
/* By default, flex-direction is set to row. I changed it to column
because I wanted the children of .campaign-block to display from
top to bottom. */
flex-direction: column;
flex: 1;
border: 1px solid;
}
.campaign-description {
/* Since you have flex: 1, .campaign-description will take up the
remaining space on the bottom. */
flex: 1;
background-color: #a05b4e;
color: #ffffff;
}
@media screen and (max-width: 450px){
.grid {
display: block;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
<!-- Removed indentations to improve readability -->
<section>
<div class="row">
<div class="col-sm-12 align-center">
<!-- Section title -->
<div class="align-center">
<b>Atape tehe migicur miesa telalem yiso ipipire;</b>
</div>
<div class="row grid">
<!-- Left pane -->
<div class="col-xs-12 col-sm-6 align-center campaign-block">
<div class="st-smc-offer-image">
<img src="https://static3.grsites.com/archive/textures/misc/misc285.jpg" />
</div>
<div class="campaign-description">
Reno ala vimir de. Lal so pes yeti itu. <br>
Efisiebe mir enacilep ocu mogiru iyoyepe. Liler oxilo <br>
nisecem tu acodeb imemoca robeci toyo cono. <br>
refigib redok lelep ece mec sahal. Hudetil run ewona mef.
<div>
<a href="http://google.com">Do smth</a>
</div>
</div>
</div>
<!-- Right pane -->
<div class="col-xs-12 col-sm-6 align-center campaign-block">
<div class="st-smc-offer-image">
<img src="https://static3.grsites.com/archive/textures/misc/misc285.jpg" />
</div>
<div class="campaign-description">
Reno ala vimir de. Lal so pes yeti itu. <br>
Efisiebe mir enacilep ocu mogiru iyoyepe. Liler oxilo <br>
nisecem tu acodeb imemoca robeci toyo cono. <br>
refigib redok lelep ece mec sahal. Hudetil run ewona mef.<br>
Reno ala vimir de. Lal so pes yeti itu. <br>
Efisiebe mir enacilep ocu mogiru iyoyepe. Liler oxilo <br>
nisecem tu acodeb imemoca robeci toyo cono. <br>
refigib redok lelep ece mec sahal. Hudetil run ewona mef.<br>
<div>
<a href="http://google.com">Do smth</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</head>关于html - flex div 的孙子占据全高，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56982118/