如何在外部div中获得灰色背景？

Question

我正在尝试将我的灰色背景显示到底部边框：

 .grey {
    background-color: #f7f7f7;
  }
 .itemsheight {
    height: 97px
  }

这是html：

 <div className="row border itemsheight">
            <div className="col-md-8 desc space">{name} channel package</div>
            <div className="col-md-2 desc grey"></div>
            <div className="col-md-2 dollar grey price middle space">{price}</div>
 </div>

如何将最后一列中的背景颜色拉伸到底部？

另见：http://codepen.io/gekkerkanniet/pen/dOKLdG

Answer 1

你有设置项目高度为97px，
所以，物品的孩子可以使用百分比来设定他们的身高

＆＃13;

＆＃13;

/*************Cart******************/
.cart .pad {
  padding: 2px;
}
.cart .padheader {
  padding: 17px;
}
.cart .links {
  padding: 17px;
  margin-bottom: 10px;
}
.cart .border {
  border: solid 0.5px;
}
.cart .right {
  text-align: right;
}
.cart .costs {
  padding: 2px;
  margin-top: 10px;
}
.cart .medium {
  font-size: 24px;
  line-height: 53px;
}
.cart .small {
  font-weight: bold;
  font-size: 14px;
}
.cart .itemsheaderheight {
  height: 68px;
}
.cart .itemsheight {
  height: 97px;
}
.cart .space {
  padding: 10px;
  height: 100%;
}
.cart .grey {
  background-color: #f7f7f7;
}
.cart .yourorder {
  font-family: "Helvetica";
  font-size: 24px;
  font-weight: 300;
  text-align: left;
  color: #333333;
}
.cart .price {
  font-family: Helvetica;
  font-size: 40px;
}
.cart .desc {
  font-size: 16px;
  font-weight: bold;
}
.cart .border-bottom {
  border-bottom: lightgray solid 0.5px;
}
.cart .border-top {
  border-top: lightgray solid 0.5px;
}
.cart .collapse {
  display: none;
}
.cart .collapse.in {
  display: block;
}

＆＃13;

<div class="cart">
    <div class="row border itemsheight">
        <div class="col-md-8 desc space"><!-- react-text: 140 -->Entertainment Plus<!-- /react-text -->
            <!-- react-text: 141 --> channel package<!-- /react-text --></div>
        <div class="col-md-2 desc grey"></div>
        <div class="col-md-2 dollar grey price middle space">10</div>
        <div class="links"><a href="">Change</a><!-- react-text: 146 --> | <!-- /react-text --><a href="">Remove</a>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;