How calc() function works in CSS?

Question

I am trying to use calc() for my css. I have created a simple Fiddle where I have two divs. One has a class with a style using calc(). But it's not having any effect. Div's height is not changing.

.cont {
  height: calc(100% - 20px);
}

<div class="cont" style="background-color:blue">fsdfds</div>
<div style="background-color:red">1234</div>

Fiddle

Thanks for help.

Possible duplicate of [Why is percentage height not working on my div?](http://stackoverflow.com/questions/31728022/why-is-percentage-height-not-working-on-my-div) — 4castle, Mar 29 '17 at 02:18
Add `html, body { height: 100%; }` to your CSS. See the link in Michael_B's answer for more information. Be aware that adding this CSS may affect other elements which use % height. — ProgrammingLlama, Mar 29 '17 at 02:21

score 5 · Accepted Answer · edited May 23 '17 at 10:30

The calc() function is working fine.

It's percentage heights you need to better understand.

In order for a percentage height to work on an element, there must be a defined height on the parent (unless the child is absolutely positioned).

Here's a post with a detailed explanation:

Working with the CSS height property and percentage values

Here's your fiddle demo with pixel heights instead: http://jsfiddle.net/UF3mb/697/

How calc() function works in CSS?

1 Answers1