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%.

6
  • You use it like this header{width:calc(100% - 17px);} ??
    – Mateutek
    Jul 8, 2015 at 11:30
  • Is 100% == 100px by any chance? If not, what would happen if you do 100% - 30px?
    – Amit
    Jul 8, 2015 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%. Jul 8, 2015 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 8, 2015 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. Jul 8, 2015 at 11:39

1 Answer 1

2

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

3
  • This did it, thanks! My code needed to be this: width: calc(~"100% - "17px); Jul 8, 2015 at 11:40
  • Whilst this may theoretically answer the question, it would be preferable 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 8, 2015 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). Jul 8, 2015 at 15:14

Not the answer you're looking for? Browse other questions tagged or ask your own question.