CODEWITHSUNDEEP
css
Mark
Mark

Reputation: 4950

How calc() function works in CSS?

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.

Upvotes: 1

Views: 54

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371003

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:

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

Upvotes: 5

Related Questions