親の高さを埋めるためにインラインブロックのdivを取得

Question

2つのdivをコンテナの高さまで完全に伸ばしたいと思います。なぜこれがなぜ難しいのか分かりませんが、私はいくつか試してみましたが、このソリューションでは複製できないようです。question

は、ここですべてのヘルプは素晴らしいことだfiddle

li { 
 
    width: 200px; 
 
    background-color: white; 
 
    height: 35px; 
 
    display: block; 
 
} 
 
.outer { 
 
    height: 100%; 
 
    background-color: gray; 
 
    display: table; 
 
} 
 
.filter-button-name { 
 
    background-color: lightblue; 
 
    display: table-cell; 
 
    height: 100%; 
 
} 
 
.filter-number-label { 
 
    background-color: pink; 
 
    color: purple; 
 
    display: table-cell; 
 
    height: 100%; 
 
}

<li class="filter-item"> 
 
    <div class="dropdown"> 
 
    <div class="outer"> 
 
     <div class="filter-button-name"> 
 
     <span>Status</span> 
 
     </div> 
 
     <div class="filter-number-label"> 
 
     <span class="label">4</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</li>

です。ありがとう。

Answer 1

あなたはこれを逃している：

.dropdown { height: 100%; } 

Revised Fiddle

絶対的に配置されていない要素の割合の高さを使用して、あなたにも、親に高さを設定する必要があります。参照：Working with the CSS height property and percentage values