Greg Gum Greg Gum - 1 year ago 66
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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download