如何在px中获得x%高度？

Question

我给了一个div 100%的高度，我想要以像素为单位的实际高度。

我怎么才能知道那个div的高度呢？

Answer 1

在jquery中，当container是div的id时，你可以这样使用：

$(document).ready(function() {
    alert($('#container').height());
});

Answer 2

使用jQuery，您应该能够使用：

$('#div').height();

Answer 3

如上所述，使用jQuery，您可以使用：

$(document).ready(function(){
   $("#container").height();
});

不过，请注意jQuery计算height的方式。引用的话：

请注意，.height()将始终返回内容高度，而与CSS框大小调整属性的值无关。

这意味着，它将忽略您可能应用的任何边距、填充和边框。

没有人提到你可以用来获得你感兴趣的确切高度的替代方案如下：

innerHeight()

$(document).ready(function(){
   $("#container").innerHeight();
});

outerHeight()

$(document).ready(function(){
   $("#container").outerHeight(); //Include padding and borders
   $("#container").outerHeight(true); //Include padding, borders and margins
});

如果您不仅想要元素高度，而且还想要包括任何填充、边框和边距，请使用此选项(如果为true，则作为参数传递)。

请参阅

此外，css应用20px的页边距顶部，50px的填充顶部以及5px的边框，所有这些都会影响总高度。

height()的演示输出

请注意，jQuery height()仍然只返回300像素，忽略了通过css添加到元素的额外高度。

innerHeight()的演示输出

注意jQuery innerHeight()如何返回350像素，这是div中的300 +填充的50。

outerHeight()的演示输出

请注意jQuery outerHeight()如何返回360像素，即div中的300 +填充的50 +边框的10 (底部5个，顶部5个)。

outerHeight的演示输出(True)

请注意jQuery outerHeight(true)如何返回380像素，即div中的300 +填充的50 +边框的10 (底部5个，顶部5个)+页边距20。