身高:100%; 不使用Flex Box

Question

问题:

• 要制作一条分隔两个对象的垂直线,但由于它没有高度,所以它不会出现,尽管我添加了height: 100%.
• 为什么不从我的div的顶部到底部填满空间？是因为.card-body有height: auto吗？

试过的案例:

• 我已经尝试过添加宽度,禁用flex-box但没有任何效果,但是如果我添加一个特定的高度我的.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

你需要让它伸展,因为你的Flex容器是 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>