CSS3 Calc() returning negative value

Question

I'm using the calc() functionality in CSS3. I have a header that is 123px tall. So for my class I'm placing:

.overlay { height: calc(100% - 123px) }

This keeps getting evaluated as -23px.

Any thoughts? Is there a better way to represent this?

nonwip · Accepted Answer · 2015-08-24 20:51:40Z

2

Well my guess is that your parent(s) are not having 100% height.

Eg html, body { height: 100%; } and perhaps other children that may be parents of the "overlay" (if any).

I am not sure tho, nor that I had any experience with negative value, just a guess.

Other than that, I don't see why it would return negative value.

Here's example of html and body being parents of that .overlay.

Example 1

And here's example of html, body and .another-parent being parents of that .overlay.

Example 2

Keep in mind that I used position: relative on .overlay in both examples as assumption. Although overlays are mostlikely suppoused to be absolute or fixed - hence they won't depend on parent(s) height.

edited Aug 24, 2015 at 20:51

answered Aug 24, 2015 at 20:38

nonwip

2,4628 gold badges39 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

num8er · Accepted Answer · 2015-08-24 20:45:03Z

0

of course it will go to minus, cuz 100% is unpredictable when it's parent element is also has no fixed parameters. try to set min-height param to prevent getting height down than 0

 .overlay: { 
  height:calc(100% - 123px); 
  min-height: 10px; 
}

also You can make it fixed position if You want to widen it to full screen, so then it will get 100% of browser area.

answered Aug 24, 2015 at 20:45

num8er

19.5k4 gold badges50 silver badges61 bronze badges

Collectives™ on Stack Overflow

CSS3 Calc() returning negative value

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related