为什么我的div不占用其父容器的100％高度？
[英]Why is my div not taking up 100% height of its parent container?
问题描述
Bit confused here. 
这里有点困惑。 I am quite tired, so I'm sure I'm making a silly mistake but here's my HTML/CSS: 我很累，所以我确定我犯了一个愚蠢的错误，但这是我的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>
Shouldn't CASideBorder be taking up 100% of its parent container, which has its height calculated by the text size and padding of CAMiddleTextContainer ? CASideBorder是否不应该占用其父容器的100％，其高度是通过CAMiddleTextContainer的文本大小和填充来CAMiddleTextContainer ？ Am I missing something really obvious here? 我在这里真的错过了什么吗？ Any help is appreciated. 任何帮助表示赞赏。
1 个解决方案
解决方案1
4 已采纳 2016-12-09 05:55:10
That is because you have align-items: center for the flexbox in which case it will default to the content height. 那是因为您有align-items: center flexbox的center，在这种情况下，它将默认为内容高度。
What you need to do is to remove that (let align-items: stretch come into play as it is the default) and also remove the height:100% from CASideBorder . 您需要做的是删除它（让align-items: stretch起作用，因为它是默认设置），还要从CASideBorder删除height:100% 。
See demo below: 请参见下面的演示：
.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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.