Using CSS3 calc() function
css
Solution
There is nothing wrong with `calc()`, it works. You just need to set a height of `100%` for the `body`/`html` elements in order for it to work as desired.
Compare this example (without `html, body { height:100%; }`) to this fixed example.
html, body {
height:100%;
}
#mid-content {
width: 100%;
height: calc(100% - 50px);
height: -webkit-calc(100% - 50px);
height: -moz-calc(100% - 50px);
border:1px solid red;
}
Additionally, it's worth noting that the `header` is `50px`, not `45px`. I also added `box-sizing:border-box` in order to include borders/padding in the element's box model calculations.
You may notice that there is space at the bottom if the screen size is less than `~700px`. That's because of the following:
#mid-content h1 {
width: 300px;
height: 250px;
font-size: 58px;
line-height: 1em;
font-family:'Oswald', sans-serif;
margin: 100px auto 70px auto;
color: white;
}
Removal of the `height`/`margin` fixes it. (example)
Problem
I'm trying to use the `calc()` function, but it return the wrong value. I'm using this: ``` height: calc(100% - 45px); height: -webkit-calc(100% - 45px); height: -moz-calc(100% - 45px); ``` ..but it sets the height to 55%. Why? What am I doing wrong here? http://jsfiddle.net/L7x9j/