这里有点困惑。我很累了,所以我确信我犯了一个愚蠢的错误,但这是我的 HTML/CSS:
.CAContainer {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
margin: 0;
padding: 0;
}
.CASideBorder {
height: 100%;
background: #000;
width: 8px;
}
.CAMiddleContainer {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
.CATopBorder {
height: 8px;
background: #000;
width: 100%;
}
.CAMiddleTextContainer {
padding: 40px 80px 40px 80px;
font-size: 4em;
color: #000;
}
.CABottomBorderContainer {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
width: 100%;
height: 8px;
}
.CABottomBorderLeft,
.CABottomBorderRight {
flex: 1;
height: 100%;
background: #000;
}
<div class="CAContainer">
<div class="CASideBorder" id="CALeftBorder"></div>
<div class="CAMiddleContainer">
<div class="CATopBorder"></div>
<div class="CAMiddleTextContainer">
text
</div>
<div class="CABottomBorderContainer">
<div class="CABottomBorderLeft"></div>
<div class="CABottomBorderRight"></div>
</div>
</div>
<div class="CASideBorder" id="CARightBorder"></div>
</div>
还有fiddle .
CASideBorder
不应该占据其父容器的 100%,其高度是根据 CAMiddleTextContainer
的文本大小和填充计算的吗?我在这里错过了一些非常明显的东西吗?如有任何帮助,我们将不胜感激。
最佳答案
这是因为 flexbox 有 align-items: center
在这种情况下,它将默认为内容高度。
您需要做的是删除它(让 align-items:stretch
发挥作用,因为它是默认的)并删除 height:100%
来自CASideBorder
。
请参阅下面的演示:
.CAContainer {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
margin: 0;
padding: 0;
}
.CASideBorder {
background: #000;
width: 8px;
}
.CAMiddleContainer {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
.CATopBorder {
height: 8px;
background: #000;
width: 100%;
}
.CAMiddleTextContainer {
padding: 40px 80px 40px 80px;
font-size: 4em;
color: #000;
}
.CABottomBorderContainer {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
width: 100%;
height: 8px;
}
.CABottomBorderLeft, .CABottomBorderRight {
flex: 1;
height: 100%;
background: #000;
}
<div class="CAContainer">
<div class="CASideBorder" id="CALeftBorder"></div>
<div class="CAMiddleContainer">
<div class="CATopBorder"></div>
<div class="CAMiddleTextContainer">
text
</div>
<div class="CABottomBorderContainer">
<div class="CABottomBorderLeft"></div>
<div class="CABottomBorderRight"></div>
</div>
</div>
<div class="CASideBorder" id="CARightBorder"></div>
</div>
关于html - 为什么我的 div 没有占据其父容器的 100% 高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41053787/