CODEWITHSUNDEEP
csstwitter-bootstrap
mpsbhat
mpsbhat

Reputation: 2773

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?

Upvotes: 4

Views: 16653

Answers (2)

hazalg
hazalg

Reputation: 91

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>

Upvotes: 9

Matt Fellows
Matt Fellows

Reputation: 6532

.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

Upvotes: 2

Related Questions