Use remaining vertical space with Bootstrap 4

问题:

i would like to have the id grid be using the full available vertical space

<div class="container fluid">
    <div class="row mb-2">
        <div class="col">
            <h2><i class="fas fa-map-marker-alt"></i> Test</h2>
        </div>

        <div class="col">
            <ul class="nav justify-content-end nav-pills">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">2018</a>
                    </li>
                                            <li class="nav-item">
                        <a class="nav-link" href="#">2019</a>
                    </li>
            </ul>
        </div>
    </div>

    <div class="row" >
        <div class="col">
            <div id="Grid"></div>
        </div>
    </div>

</div>

https://jsfiddle.net/erhansogood/aq9Laaew/247411/

回答1:

Make the container full height (for example using min-height:100vh), and then use the flexbox utility classes to make the 2nd row fill the height using flex-fill. The same is done on the inner col.

<div class="container fluid d-flex flex-column mvh-100">
    <div class="row mb-2">
        <div class="col">
            <h2><i class="fas fa-map-marker-alt"></i> Test</h2>
        </div>
        <div class="col">
            <ul class="nav justify-content-end nav-pills">
                <li class="nav-item">
                    <a class="nav-link active" href="#">2018</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">2019</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="row flex-fill flex-column">
        <div class="col flex-fill">
            <div id="Grid" class="h-100">
                Grid
            </div>
        </div>
    </div>
</div>

Demo: https://www.codeply.com/go/nSK4W0APEQ

---

Related: Bootstrap 4: How to make the row stretch remaining height?