Topic: MDB Card full height of screen
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?
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%;
}
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: 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
Konrad Stępień staff commented 5 years ago
Hi @tommykjensen,
Can you send me part of your code?
Did you try set styles for this component something like this?
or
?
tommykjensen commented 5 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 5 years ago
@tommykjensen please send me your code to reproduce the problem.
pabloabl pro premium commented 4 years ago
Were you able to solve the problem? that happens to me too.
Thanks. Best regards. Pablo.