-webkit-calc doesn't work for min-height

Question

I am trying this:

.main{
            min-height: -moz-calc(100% -50px);
      min-height: -webkit-calc(100% -50px);
      min-height: calc(100% -50px);
   background-color:#000;
   color:white;
    }

html{
height:100%;
}

<html>
<body style='height:100%;'>
      <header style='height:50px;background-color:#0e0'></header>
      <div class="main">ok</div>
    </body>
  </html>

But it doesn't work

I want my div to go to the bottom of screen minus the header that is 50px

Thanks

so this can be marked as a dup of http://stackoverflow.com/questions/14967421/css-calc-not-working — Fabrizio Calderan, Jun 16 '15 at 08:13

Fabrizio Calderan · Answer 1 · 2015-06-16T07:56:39.717

1

height: 100% can work if all ancestors of .main have the same height defined but in your example the html element has not defined any height.

Example #1 (height set on html element): http://codepen.io/anon/pen/bdrYqx

You could try also vh units: this won't require to set the height also on the ancestors

.main{
    min-height: -moz-calc(100vh - 50px);
    min-height: -webkit-calc(100vh - 50px);
    min-height: calc(100vh - 50px);
}

Example #2: (no height, only vh unit): http://codepen.io/anon/pen/pJrdeB

edited Jun 16 '15 at 07:56

answered Jun 16 '15 at 07:47

Fabrizio Calderan

120,726
26
164
177

It doesn't work neither – lopata Jun 16 '15 at 07:52
Why it doesn't work on my snippet then, and neither on my site (I have already set html to 100% – lopata Jun 16 '15 at 08:04
1

I see you have updated your question: then I suppose it's due to the missing space after the minus (`-`) as suggested in a comment above. If it still doesn't work the show us a link where the issue occurs – Fabrizio Calderan Jun 16 '15 at 08:05
Aw That was the space, thanks – lopata Jun 16 '15 at 08:10

-webkit-calc doesn't work for min-height

1 Answers1