After successfully using the calc function for width I naturally wondered if I could use the same function for height. At first I thought the answer was a definitive ‘no!’ I tried a couple of calc formulas for height:
- height: calc(100% – 100px);
- height: calc(500px + 25%);
Neither were successful and I originally thought that calc just couldn’t be applied to the height tag. Then as I thought about why a revelation dawned on me. When I was using the calc function for the width tag I had a defined width of 100%. 100% reflected the width of the browser window, or width of the website (which could have also been defined as a set numerical value).
However, height doesn’t work that way. You can’t just code an element with a height of some percentage value…you can do it with a numerical value but not percentage! Elements, for example a Div, don’t read height like they do width. If you have no other code on the page and you code this:
- .div {width: 100%; }
- .div {height:100%}
The width of the element will take up the screen. The height of the element will only be as tall as the text or image inside.
Here is the key, if your Div is nested inside of another DIV, and that outer Div has a set height then you can use the calc function for the inner Div. For example, suppose your outer Div has a height of 800px and you always want the inner Div to be (200px + 25%). You can just write the height for the inner Div as {height: calc(200px +25%);} . This will translate to a height of 400px, which you could have just simply wrote in there in the first place without the calc formula.
I haven’t been able to think of any value of this. Since the outer Div’s height cannot be set to a percentage or a dynamic formula, then there is no value that I can see in using the calc formula for the height. Maybe as I get deeper and learn more about CSS and hopefully JavaScript I’ll learn you can set a dynamic height, but for now that is above my skill set.