Topic: MDB Card full height of screen

tommykjensen free asked 4 years ago


I would like the mdb-card to fill the entire height of the screen and not use fixed size in pixels. How do I best do that?


Konrad Stępień staff commented 4 years ago

Hi @tommykjensen,

Can you send me part of your code?

Did you try set styles for this component something like this?

mdb-card {
  height: 100%
}

or

height: 100vh

?


tommykjensen free commented 4 years ago

Yes I tried these. 100% has no effect. 100vh extends the card beyond the screen height and I get a scrollbar which is not my intent.


Konrad Stępień staff commented 4 years ago

@tommykjensen please send me your code to reproduce the problem.


pabloabl premium commented 3 years ago

Were you able to solve the problem? that happens to me too.

Thanks. Best regards. Pablo.


Wymac_ICT priority answered 3 years ago


I am using the layout from ng-admin-pro project and I cant set the mdb card height to 100% on the new component that I create. Can you please help me with which parent component is causing the issue.


Grzegorz Bujański staff commented 3 years ago

Provide the code for which it does not work for you.


Arkadiusz Idzikowski staff answered 3 years ago


The card will have 100% height if its container, please try to set 100% height on parent elements and body as well:

<div class="container h-100">
  <div class="row h-100">
    <div class="col-md-6">
      <mdb-card class="h-100">
        <!--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>
  </div>
</div>

In style.scss:

html, body {
  height: 100%;
}

Kumagai free commented 3 years ago

I was helped by your advise! Thank you!!



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.8.1
  • Device: pc
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No