How to define a card to take up all the available vertical s

<div class="col-md-4 m-5 position-relative" [ngClass]="'d-md-block'" style="min-height: 100vh;">
  <mdb-card class="h-100 position-absolute">
    <!--Card image-->
    <mdb-card-img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(97).jpg" alt="Card image cap"></mdb-card-img>
    <!--Card content-->
    <mdb-card-body>

      <!--Title-->
      <mdb-card-title>
        <h4>Card Title</h4>
      </mdb-card-title>

      <!--Text-->
      <mdb-card-text> Some quick example text to build on the card title and make up the bulk of the card's
        content.
      </mdb-card-text>

      <a href="#" mdbBtn color="primary" mdbWavesEffect>Button</a>
    </mdb-card-body>
  </mdb-card>
</div>

davout commented a year ago

I am copying the example at... https://ng-admin-pro.mdbootstrap.com/tables/table2

How can this be changed so that data table takes up all the available vertical space? I'd like the pagination control to be positioned relative the bottom of the available space, and the area between the column titles and the pagination row to flex Also with this type of pagination, how the number of rows that are displayed be determined?

---

Konrad Stępień staff commented a year ago

Hi @davout,

You have any example such a table?

---