Бутстрап: Размножьтесь высота контейнера/ширина

Question

У меня есть следующий HTML:

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

, как я могу иметь мой компонент, имеющий такую ​​же высоту, как мой контейнер? Я мог установить height: inherit; как в строке, так и в компоненте, но мне было интересно, есть ли другой способ.

Answer 1

Вы можете использовать один и тот же класс CSS на всех трех ..

<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

Вы также можете использовать Flexbox. Я добавил границу границы, чтобы сделать границы видимыми.

<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/