Get Inline-Block Divs, um die Höhe des Elterns zu füllen

Question

Ich möchte zwei divs vollständig auf die Höhe des Containers erweitern. Nicht sicher, warum das so schwierig ist, aber ich habe ein paar Dinge ausprobiert und kann die Lösung in diesem question nicht replizieren.

Hier ist ein 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>

Jede Hilfe wäre toll. Vielen Dank.

Answer 1

Sie verpassen dies:

.dropdown { height: 100%; } 

Revised Fiddle

Bei der Verwendung von Prozent Höhen auf Elemente, die nicht absolut positioniert sind, müssen Sie auch eine Höhe auf dem übergeordneten einzustellen. Siehe: Working with the CSS height property and percentage values