Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make the row stretch remaining height

I'm trying to make the container-fluid and 2nd row to stretch to the remaining height but I couldn't find a way to do it.

I have tried setting the align-items/align-self to stretch but didn't work either.

Below is my code structure:

<div class="container-fluid"> <!-- I want this container to stretch to the height of the parent -->     <div class="row">         <div class="col">             <h5>Header</h5>         </div>     </div>     <div class="row"> <!-- I want this row height to filled the remaining height -->         <widgets [widgets]="widgets" class="hing"></widgets>         <div class="col portlet-container portlet-dropzone"> <!-- if row is not the right to stretch the remaining height, this column also fine -->             <template row-host></template>         </div>     </div> </div> 

I'm using Bootstrap 4 A6. Could someone suggest me how to make the container and the row to stretch the remaining height?

like image 402
Reddy Avatar asked Feb 13 '17 00:02

Reddy


People also ask

How do I make a div fill all space available?

The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent. Example 1: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.


1 Answers

Bootstrap 4.1.0 has a utility class for flex-grow which it what you need for the row to fill the remaining height. You can add a custom "fill" class for this. You also have to make sure the container is full height.

The class name in Bootstrap 4.1 is flex-grow-1

<style> html,body{     height:100%; }  .flex-fill {     flex:1; } </style>  <div class="container-fluid d-flex h-100 flex-column">     <!-- I want this container to stretch to the height of the parent -->     <div class="row">         <div class="col">             <h5>Header</h5>         </div>     </div>     <div class="row bg-light flex-fill d-flex justify-content-start">         <!-- I want this row height to filled the remaining height -->         <div class="col portlet-container portlet-dropzone">             <!-- if row is not the right to stretch the remaining height, this column also fine -->             Content         </div>     </div> </div> 

https://www.codeply.com/p/gfitG8PkNE

Related: Bootstrap 4 make nested row fill parent that has been made to fill viewport height using flex-grow

like image 177
Zim Avatar answered Nov 12 '22 19:11

Zim