0

I have the following CSS style on a fixed header element

width: calc(100% - 17px);

I'm working inside of SharePoint, and with the way SharePoint generates the scrollbar on the side, my header element (100% width) appears on top of the scrollbar. To account for this, I'm trying to remove the 17px for the scrollbar.

However, when the page renders, the width ends up being 83% and I'm not sure why. I unfortunately can't give you a link to the page in question because it's in our test environment. Any ideas why this would be producing a result of 83%?

EDIT: I should also mention I'm using LESS to write my styles. I just checked the compiled CSS document, and it is producing a final output of width: 83%.

Samuel Liew
  • 76,741
  • 107
  • 159
  • 260
JesseEarley
  • 1,036
  • 9
  • 20
  • You use it like this `header{width:calc(100% - 17px);}` ?? – Mateutek Jul 08 '15 at 11:30
  • Is 100% == 100px by any chance? If not, what would happen if you do 100% - 30px? – Amit Jul 08 '15 at 11:31
  • It is not, 100% width is the width of the viewport/monitor. Oh, and that produced a result of 70%. If I do my CSS style in FireBug directly, it works fine, is seems to be LESS that is compiling it to 83%. – JesseEarley Jul 08 '15 at 11:32
  • If you need to hardcode values to account for the scrollbar, you're doing something wrong. What about pages that don't have scroll, for the simplest example? – Etheryte Jul 08 '15 at 11:33
  • There isn't a page that doesn't have a scroll in our environment. When you work with SharePoint, it's a different beast. – JesseEarley Jul 08 '15 at 11:39
  • Never using search? ;) http://stackoverflow.com/search?tab=votes&q=%5bless%5d%20calc – seven-phases-max Jul 08 '15 at 15:12

1 Answers1

2

Please read this post. It has some workaround . https://github.com/less/less.js/issues/974

Pankaj Ladhar
  • 155
  • 6
  • This did it, thanks! My code needed to be this: width: calc(~"100% - "17px); – JesseEarley Jul 08 '15 at 11:40
  • Whilst this may theoretically answer the question, [**it would be preferable**](//meta.stackoverflow.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. Link-only answers can become invalid if the linked page changes – Paulie_D Jul 08 '15 at 12:01
  • While the answer is correct, the question should be voted to be closed in the first place ([less] already has *tens* of identical questions). – seven-phases-max Jul 08 '15 at 15:14