Bootstrap: Propagieren Behälterhöhe/Breite

Question

Ich habe folgende html:

<div class="container-fluid" style="height: 80px;"> 
    <div class="row"> 
    <div class="component"> 
     ... 
    </div> 
    </div> 
</div> 

, wie kann ich meine Komponente als mein Behälter die gleiche Höhe haben? Ich konnte height: inherit; auf der Reihe und der Komponente einstellen, aber ich fragte mich, ob es irgendeinen anderen Weg gab.

Answer 1

Sie könnten die gleichen CSS-Klasse auf allen drei verwenden ..

<div class="container-fluid equal"> 
    <div class="row equal"> 
    <div class="component equal"> 
     ... 
    </div> 
    </div> 
</div> 

.equal { 
    height: 80px; 
} 

http://bootply.com/IkDJD4cf5G

Answer 2

Sie können auch Flexbox verwenden. Ich habe die Rahmenfarbe hinzugefügt, um die Grenzen sichtbar zu machen.

<div class="container-fluid"> 
    <div class="row"> 
    <div class="component"> 
     ... 
    </div> 
    </div> 
</div> 


.container-fluid { 
    height: 80px; 
    border: 1px solid black; 
} 
.row { 
    height: 100%; 
    text-align: center; 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
} 
.component { 
    border: 1px solid red; 
} 

https://jsfiddle.net/m655owr8/5/