외부 div에서 회색 배경을 얻으려면 어떻게해야합니까?

Question

나는 아래쪽 테두리까지 내 회색 배경 쇼를 만들려고 노력하고 있어요 :

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

가 어떻게 바닥까지 마지막 항목에 배경 색상을 늘릴 수 :

다음

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

는 HTML입니까? 또한 여기

봐 : http://codepen.io/gekkerkanniet/pen/dOKLdG

Answer 1

당신은 itemsheight가 97px하도록 설정,
그래서 비율을 사용할 수 있습니다 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>