2

I using something like margin-top: calc(100% - $value) with the intent that the calculation will involve 100% of the height to calculate the top-margin. However, in practice it is making the calculation based on 100% of the width.

Anyone have any clues about how to base the calculation on percent height rather than width? (So far, I've checked that the undesired behavior is happening in both Chrome and FF).

https://jsfiddle.net/bfxhebc3/

miir
  • 1,814
  • 1
  • 17
  • 25
  • Please refer this : https://stackoverflow.com/questions/16164736/css3-height-calc100-not-working – Sagar Sep 12 '17 at 00:13
  • @Sagar Thank you, unfortunately that is not quite the issue I am having. calc is working, it just doesn't work as I hoped. The calculation assumes that the percentage values in the calc function refers to the screen width rather than the height as I expected. – miir Sep 12 '17 at 00:19
  • 2
    As stated in [the CSS spec](https://www.w3.org/TR/CSS22/box.html#propdef-margin-top): "Percentages: refer to width of containing block" – Rob Sep 12 '17 at 00:27

1 Answers1

6

Per the css spec, percentage values for margin, including margin-top, are based on / calculated from the width of the containing block.

If you are referring to the height of the window, you can use vh instead of percent:

margin-top: calc(100vh - $value);
Johannes
  • 64,305
  • 18
  • 73
  • 130
  • 1
    Yep, that works. Thanks! The only issue is that I've come across somea bug with some ios safari with the vh value on the device messing up when the device orientation flips back and forth, so I wished to use percent if possible. – miir Sep 12 '17 at 00:12