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%;
}
Resolved
- User: Pro
- Premium support: No
- Technology: 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 a year ago
Hi @tommykjensen,
Can you send me part of your code?
Did you try set styles for this component something like this?
or
?
tommykjensen pro priority vip early access commented a year 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 a year ago
@tommykjensen please send me your code to reproduce the problem.
pabloabl pro premium commented 2 months ago
Were you able to solve the problem? that happens to me too.
Thanks. Best regards. Pablo.