second number is being ignored in calc()

Question

I have a web page with a header, menu, wrapper and footer. I'm trying to make the footer sticky by setting the height of all the components apart from the wrapper and then using calc to determine the min-height of said wrapper. The browser picks up the calc function in inspect element but when I check the height of the wrapper it is always 100% and not 100% - 545px and I don't know why. I've tested it in firefox and chrome and on different size monitors but no joy. Is there something I'm doing wrong?

#wrapper-fullwidth{
/* Firefox */
min-height: -moz-calc(100% - 545px);
/* WebKit */
min-height: -webkit-calc(100% - 545px);
/* Opera */
min-height: -o-calc(100% - 545px);
/* Standard */
min-height: calc(100% - 545px);
}

jsfiddle

Many thanks in advance for any help you can provide.

Answer 1

I think you need to try something like this.

If this is your HTML (or similar):

<div class="header">Header</div>
<div class="main">Main</div>
<div class="footer">Footer</div>

the CSS needs to look like:

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.main {
    min-height: -moz-calc(100% - 90px);
    min-height: -webkit-calc(100% - 90px);
    min-height: -o-calc(100% - 90px);
    min-height: calc(100% - 90px);
    background-color: lightgray;
}
.header, .footer {
    height: 45px;
    background-color: yellow;
}

You need to set a height to html and body or else the percentage height in .main is not defined.

Demo at: http://jsfiddle.net/audetwebdesign/2e3dK/

Answer 2

My guess is that the px on the end makes them strings and not ints.

Try this:

min-height: -moz-calc(100% - 545);

Update: since that most likely wont work, try using height and not min-height

height: -moz-calc(100% - 545px);