Question

我想手动设置内容高度，以便我的应用程序填满屏幕。这是执行此操作的代码：

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

然而，它太大了17像素，但我无法找到它们的来源。

我仔细查看了Chrome开发人员工具，所有计算结果都是正确的。我已经设置了

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

确保正在使用边框。

但我不断得到一个滚动条，除非我从总数中减去17。

我该如何解决？

Answer 1

也许它是我不记得的组合保证金/填充尝试使用html / body选择器

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

body和html等HTML标记带有默认边距（如果我没有错误，则为8px）。我不确定他们是否也有填充物。如果这是您正在寻找的答案，请扩展确切的数字。

为什么我的计算高度为17px？

1 个答案: