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%


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-->
          alt="Card image cap"
        <!--Card content-->
            <h4>Card Title</h4>

            Some quick example text to build on the card title and make up the bulk of the card's

          <a href="#" mdbBtn color="primary" mdbWavesEffect>Button</a>

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.


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



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