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);
}
Many thanks in advance for any help you can provide.
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.