如何将背景颜色填充到父元素的高度？ [复制]

Question

在制作卡片时，我遇到了一个难题。我想填充背景色整个框内容，但我是html和css的初学者，所以我不知道该怎么做。 我的代码如下。

.box-container1 {
  display: flex;
  justify-content: center;
}

.box {
  background-color: white;
  border: 1px solid #3AD6B1;
  box-shadow: 0 3px 6px #ddd;
  padding: 0;
  margin: 8px;
  width: 420px;
}

.box .box-header {
  background-color: #3AD6B1;
  width: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  height: 4rem;
}

.box .box-img {
  padding: 0.5rem;
  text-align: center;
  align-items: center;
  vertical-align: middle;
}

.box .box-content {
  margin: 0.5rem;
  background-color: rgba(0, 0, 0, 0.4);
  text-align: left;
}

.bg-green {
  background-color: #3AD6B1!important;
}

.bg-green01 {
  background-color: #1CA484;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="box-container1">
  <div class="box">
    <div class="box-header">
      <div class="bg-green01 text-white p-2 font-weight-bold">
        <div class="h3 m-0">1</div>
      </div>
      <div class="font-weight-bold p-2 text-left">Box 1</div>
    </div>
    <div class="box-img"><img src="assets/img/Team-presentation.png"></div>
    <div class="bg-green01 w-100" style="height: 1rem"></div>
    <div class="box-content">
      <label>This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text.</label>
    </div>
  </div>
  <div class="box">
    <div class="box-header">
      <div class="bg-green01 text-white p-2 font-weight-bold">
        <div class="h3 m-0">2</div>
      </div>
      <div class="font-weight-bold p-2 text-left">Box 2</div>
    </div>
    <div class="box-img"><img src="assets/img/Coding.png"></div>
    <div class="bg-green01 w-100" style="height: 1rem"></div>
    <div class="box-content">
      <label>This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text.</label>
    </div>
  </div>
</div>

如果您试用我的代码，您会发现背景颜色没有填充到 case box2。 但我想填写卡片内容。 我想买这个。

Answer 1

你需要为选择器.box添加两条flex规则display: flex和flex-direction: column。

另外，为选择器.box .box-content 添加规则flex: 1。延伸到整个可用空间。

在同一个选择器中将margin 更改为padding。

.box-container1 {
    display: flex;
    justify-content: center;
}
.box {
    display: flex;
    flex-direction: column;
    background-color: white;
    border: 1px solid #3AD6B1;
    box-shadow: 0 3px 6px #ddd;
    padding: 0;
    margin: 8px;
    width: 420px;
}
.box .box-header {
    background-color: #3AD6B1;
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    height: 4rem;
}
.box .box-img {
    padding: 0.5rem;
    text-align: center;
    align-items: center;
    vertical-align: middle;
}
.box .box-content {
    padding: 0.5rem;
    background-color: rgba(0, 0, 0, 0.4);
    text-align: left;
    flex: 1;
}
.bg-green {
    background-color: #3AD6B1!important;
}
.bg-green01 {
    background-color: #1CA484;
}

<div class="box-container1">
    <div class="box">
        <div class="box-header">
            <div class="bg-green01 text-white p-2 font-weight-bold">
                <div class="h3 m-0">1</div>
            </div>
            <div class="font-weight-bold p-2 text-left">Box 1</div>
        </div>
        <div class="box-img"><img src="assets/img/Team-presentation.png"></div>
        <div class="bg-green01 w-100" style="height: 1rem"></div>
        <div class="box-content">
            <label>This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text.</label>
        </div>
    </div>
    <div class="box">
        <div class="box-header">
            <div class="bg-green01 text-white p-2 font-weight-bold">
                <div class="h3 m-0">2</div>
            </div>
            <div class="font-weight-bold p-2 text-left">Box 2</div>
        </div>
        <div class="box-img"><img src="assets/img/Coding.png"></div>
        <div class="bg-green01 w-100" style="height: 1rem"></div>
        <div class="box-content">
            <label>This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text.</label>
        </div>
    </div>
</div>