Question

我正在为我的公司开发一个网站，所以我决定使用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

让我感到困扰的部分是我们俩都使用Windows 7和Chrome 69.0.3497.100。是否有人知道为什么会发生这种情况，还是有一种更好的动态查找元素高度的方法？我认为这无关紧要，但这是我正在使用的代码。

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

Answer 1

也许您有一些css元素，这些元素取决于用户屏幕的高度/宽度。

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

Answer 2

jQuery .height（）函数返回以像素为单位的元素的高度，因此，如果您的代码是使用Bootstrap以及预定义模板和响应式设计的大小来设置的，则您期望高度和宽度的百分比为屏幕尺寸，而不是绝对尺寸。

因此，例如，Bootstrap按钮的$（“＃someid”）。height（）会在两个屏幕分辨率不同的显示器上为您提供两个不同的值。

对于Bootstrap网站和系统，通常不需要直接调整高度，这是您要避免的事情，因为您应该使用提供的基于网格和类的系统。而是分别使用margin和padding类“ m”和“ p”来更改边距/边界。

Bootstrap 4 Spacing Doc

属性是以下项之一：

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

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

Bootstrap Grid Doc

Bootstrap Display/Responsiveness Doc

jQuery height函数返回不同的值

2 个答案: