Greg Gum Greg Gum - 2 months ago 7
CSS Question

Why are my calculations 17px off on height?

I want to set the content height manually so that my app fills the screen. This is the code that does this:

let headerHeight = $("#navBar").height();
let footerHeight = $("#footer").height();
let browserWindowHeight = $(window).height();
let contentHeight = browserWindowHeight - (headerHeight + footerHeight);
$("#pageHost").height(contentHeight);


However, it is too large by 17 pixels, but I can't find where they are coming from.

I have carefully looked through the chrome developer tools, and all calculations appear correct. I have set

html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}


to ensure that border-box is being used.

But I keep getting a scrollbar unless I subtract 17 from the total.

How do I resolve?

Answer

Maybe it's the combined margin/padding i don't remember try in html/body class

html,body {
  box-sizing: border-box;
  margin: 0; padding: 0;
}
*, *:before, *:after {
  box-sizing: inherit;
}

html tags like body and html comes with a default margin (8px if i'm not mistaken on the number) and not sure about if padding. Please if this the answer you were looking for expand on exact numbers.