Javascript jqueryheight函数返回不同的值

我正在为我的公司开发一个网站，我决定使用Bootstrap和jQuery来加快开发速度。我去把我的网站展示给一位同事看，它看起来和我电脑上的不一样。在进一步挖掘之后，我发现jQuery

height

方法是罪魁祸首

使用我在他的电脑上找到的JavaScript控制台

$('header').height() == 277.552
$('header').outerHeight() == 397.552
$('header').length == 1

$('header').height() == 158
$('header').outerHeight() == 278
$('header').length == 1

…在我的电脑上

$('header').height() == 277.552
$('header').outerHeight() == 397.552
$('header').length == 1

$('header').height() == 158
$('header').outerHeight() == 278
$('header').length == 1

让我感到困惑的是，我们都在使用Windows7和Chrome69.0.3497.100。有没有人知道为什么会发生这种情况，或者有没有更好的方法来动态查找元素的高度？我相信这是无关紧要的，但这是我正在使用的代码

$('.sidenav').css('padding-top', Math.max($('header').outerHeight() - $(window).scrollTop(), 50) + 30);

---

可能您有一些css元素，它们取决于用户屏幕的高度/宽度

例如，您可以使用字体大小属性，其单位为vmin/vw/vh。

jQuery.height（）函数以像素为单位返回元素的高度，因此，如果您的代码是在响应式设计中使用具有预定义模板和大小的引导设置的，则您希望高度和宽度以屏幕大小的百分比值为单位，而不是绝对的

因此，引导按钮（例如）的$（“#someid”）.height（）将在两台显示器上提供两个不同的值，它们的屏幕分辨率不同

对于引导式网站和系统，直接调整高度通常是不必要的，并且是您希望避免的，因为您应该使用提供的网格和基于类的系统。而是分别使用边距和填充类“m”和“p”来更改边距/边框

其中属性是以下内容之一：

m - for classes that set margin
p - for classes that set padding

t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom

blank - for classes that set a margin or padding on all 4 sides of the element
Where size is one of:

0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer * .25
2 - (by default) for classes that set the margin or padding to $spacer * .5
3 - (by default) for classes that set the margin or padding to $spacer
4 - (by default) for classes that set the margin or padding to $spacer * 1.5
5 - (by default) for classes that set the margin or padding to $spacer * 3
auto - for classes that set the margin to auto

其中一个边是：

m - for classes that set margin
p - for classes that set padding

t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom

blank - for classes that set a margin or padding on all 4 sides of the element
Where size is one of:

0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer * .25
2 - (by default) for classes that set the margin or padding to $spacer * .5
3 - (by default) for classes that set the margin or padding to $spacer
4 - (by default) for classes that set the margin or padding to $spacer * 1.5
5 - (by default) for classes that set the margin or padding to $spacer * 3
auto - for classes that set the margin to auto

然后利用网格和行以及响应实用程序类来确保您的网站在不同屏幕大小上看起来相似，或者可以相应地/响应地进行调整

---

如果元素始终可见，请尝试使用Javascript document.querySelector（“header”）.clientHeight；看看你是否得到了同样的结果result@Stakvino在两台计算机上返回相同的值。：）很久以前我也遇到过类似的问题，得到了一个解决我问题的答案：有些页面的页眉有两行，有些页面的页眉有10行。大多数情况下是相同的，但有两个例外。