Question

在左侧框中，我希望子元素与父元素具有相同的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!!

流动子元素与父级相同的高度

1 个答案: