外側の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

あなたは価格のdivの高さが必要な場合はそうitemsheightの子が自分の身長

/*************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; 
 
}

<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>