Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

min-height with calc function not working

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?

like image 447
mpsbhat Avatar asked Oct 26 '25 14:10

mpsbhat


2 Answers

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>
like image 158
hazalg Avatar answered Oct 29 '25 08:10

hazalg


.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

like image 39
Matt Fellows Avatar answered Oct 29 '25 09:10

Matt Fellows



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!