如何在px中获得x％的高度？

我给了div一个100％的高度，我想要px的实际高度。
我怎样才能找出那个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的方式。 引用文档 ：

请注意，无论CSS box-sizing属性的值如何，.height（）将始终返回内容高度。

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

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

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作为参数传递），请使用此选项。

见DEMO

该演示展示了如何将高度为300px应用于div。 此外，css适用于20px的margin-top，50px的padding-top以及5px的边界，这些都会影响总高度。

高度演示输出（）

请注意，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。

Answer 4

这是一个不使用jquery的解决方案

 document.querySelector("#yourElementIdGoesHere").getBoundingClientRect(); 

此函数将返回具有以下属性的对象

• 底部
• 高度
• 剩下
• 对
• 最佳
• 宽度

只需从那里获取宽度和高度，它们以像素为单位

-N