高度：100％; 不適用於Flex Box

Question

問題：

• 要創建一條分隔兩個對象但不會出現的垂直線，因為盡管我添加了height: 100%但它沒有height: 100% 。
• 為什么它不填充div頂部到底部的空間？ 是因為.card-body height: auto嗎？

審理案件：

• 我已經嘗試過增加寬度，禁用flex-box，但是沒有任何效果，但是如果我在.card-body添加特定的高度， .card-body可以工作。
  

您知道不增加特定高度如何工作的解決方案嗎？

 .card { margin-bottom: 30px; } .card > .card-header { font-weight: 500; text-transform: uppercase; font-size: 15px; margin-bottom: 6px; } .card > .card-header.light { color: #fff; } .card > .card-body { background-color: #fff; border-radius: 12px; padding: 24px; -webkit-box-shadow: -2px 4px 34px 1px rgba(0, 0, 0, 0.15); -moz-box-shadow: -2px 4px 34px 1px rgba(0, 0, 0, 0.15); box-shadow: -2px 4px 34px 1px rgba(0, 0, 0, 0.15); } .card > .card-body.server-status { display: flex; align-items: center; } .card > .card-body.server-status > .counter { width: 50%; font-weight: 500; color: #95a0b7; font-size: 32px; display: flex; flex-direction: column; align-items: center; } .card > .card-body.server-status > .counter > span { font-size: 15px!important; color: #0d2c4a!important; text-transform: capitalize; } 

  <div class="card"> <div class="card-header light"> Active Services </div> <div class="card-body server-status"> <div class="counter"> 7/9 <span> Servers running </span> </div> <div style="border-left:1px solid #0d2c4a;height:100%;"></div> <div class="chart"> </div> </div> </div> 

Answer 1

因為伸縮容器是align-items: center所以需要使其伸展align-items: center

您可以將高度降低100％，我在分隔符中添加了一個類，歸結為

.divider {
  align-self: stretch;
}

如果您沒有對齊中心，則默認情況下會工作，因為對齊項默認為拉伸，但由於您將其更改為居中並且分隔線沒有內容，因此該行不顯示。 將分隔線自身設置為再次拉伸可解決此問題，無需額外的CSS

 .card { margin-bottom: 30px; } .card>.card-header { font-weight: 500; text-transform: uppercase; font-size: 15px; margin-bottom: 6px; } .card>.card-header.light { color: #fff; } .card>.card-body { background-color: #fff; border-radius: 12px; padding: 24px; -webkit-box-shadow: -2px 4px 34px 1px rgba(0, 0, 0, 0.15); -moz-box-shadow: -2px 4px 34px 1px rgba(0, 0, 0, 0.15); box-shadow: -2px 4px 34px 1px rgba(0, 0, 0, 0.15); } .card>.card-body.server-status { display: flex; align-items: center; } .card>.card-body.server-status>.counter { width: 50%; font-weight: 500; color: #95a0b7; font-size: 32px; display: flex; flex-direction: column; align-items: center; } .card>.card-body.server-status>.counter>span { font-size: 15px!important; color: #0d2c4a!important; text-transform: capitalize; } .divider { align-self: stretch; } 

 <div class="card"> <div class="card-header light"> Active Services </div> <div class="card-body server-status"> <div class="counter"> 7/9 <span> Servers running </span> </div> <div class="divider" style="border-left:1px solid #0d2c4a;"></div> <div class="chart"></div> </div> </div> 

Answer 2

您也可以將此CSS屬性添加到CSS中...

.counter{
    border-right: 1px solid black;
}

Answer 3

代替使用<div> ，嘗試使用<hr>並用css旋轉它。 類似於以下內容：

hr { 
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
    transform: rotate(90deg);
} 

請參閱此文檔以獲取幫助： https : //www.w3schools.com/tags/tag_hr.asp