流體子元素與父

Question

Fiddle

在左框中同一高度，我希望孩子元素具有相同的height與父。

正如你可以在小提琴中看到的，父母是具有綠色邊框的元素。

當右框高度增加時，左框的子元素不具有高度100%。

注：我不想使用一些填充。

HTML：

<div class="search_navigation"> 
    <div class="keyword_category_wrapper"> 
    <div class="keyword_wrapper"> 
     <div class="keyword_icon_txt_wrapper"> 
      <div class="keyword_icon">icon1</div> 
      div class="keyword_txt">Keywords</div>    
     </div>  
    </div>  
    <div class="keyword_category_space"></div> 
    <div class="category_wrapper"> 
     <div class="category_icon_txt_wrapper"> 
      <div class="category_icon">icon2</div> 
      <div class="category_txt">Search by<br /> Category</div>    
     </div>  
    </div> 
    </div>  
</div> 

CSS：

body{  
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-weight: 300; 
} 

.search_navigation{ 
    width: 100%;    
    height:10%; 
    position:relative; 
    display:table; 

} 

.keyword_category_wrapper{ 
    display: table; 
    width: 100%;   
    text-align: center; 

} 

.keyword_category_space{ 
    display: table-cell; 
    width: 5%; 
    position: relative;  
} 

.keyword_wrapper, .category_wrapper{ 
    display: table-cell; 
    width: 47.5%; 
    position: relative;  
    vertical-align: middle; 
    border: 1px solid green; 
} 

.keyword_icon_txt_wrapper, .category_icon_txt_wrapper{ 
    display: table; 
    text-align: center; 
    position: relative; 
    width: 100%; 
    height: 100%; 

} 

.keyword_icon{ 
    color: white; 
    font-weight: 400; 
    font-size: 1em; 
    display: table-cell; 
    vertical-align:middle; 
    position: relative; 
    width: 30%; 
    height:100%; 
    background-color: #FB7F27; 
} 

.category_icon{ 
    display: table-cell; 
    vertical-align:middle; 
    position: relative; 
    width: 30%; 
    background-color: #FB7F27; 

} 

.keyword_txt{ 
    font-size: 1em;  
    color: white; 
    display: table-cell; 
    vertical-align:middle; 
    position: relative; 
    width: 70%; 
    background-color: #F89551; 
    -moz-border-radius: 0px; 
    -webkit-border-radius: 0px 3px 3px 0px; 
    border-radius: 0px 3px 3px 0px; 
    height:100%; 


} 

.category_txt{ 
    font-size: 1em; 
    color: white; 
    display: table-cell; 
    vertical-align:middle;  
    position: relative; 
    width: 70%; 
    background-color: #F89551; 
    -moz-border-radius: 0px; 
    -webkit-border-radius: 0px 3px 3px 0px; 
    border-radius: 0px 3px 3px 0px;  
} 

Answer 1

添加height:100%;到.keyword_category_wrapper

.keyword_category_wrapper { 
    display: table; 
    width: 100%; 
    height:100%; /* added */ 
    text-align: center; 
} 

Demo

Stretches with long phrases too!!