I have a bootstrap panel here where myself trying to set the min-height of panel-body class as,
.panel-body {
min-height: calc(100% - 100px);
}
Why it is not working in the given fiddle? Is calc function browser dependent?
check css-tricks
you can check css-trick's post about sticky-footer, it sets sticky footer in 5 different ways
.content {
min-height: calc(100vh - 70px);
}
.footer {
height: 50px;
}
<body>
<div class="content">
content
</div>
<footer class="footer">sticky footer</footer>
</body>
.container doesn't have any height set so it will be as tall as its child element, who are trying to be 100% of its height. See the dilema?
Make .container have 100% height (And all its parents too) and you should see some success?
See my fork of your fiddle: Fixed Fiddle
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With