¿Cómo obtener x% de altura en px?

Question

di 100% de altura a un div y quiero la altura real en px.
¿Cómo puedo averiguar la altura de ese div?

Answer 1

con jQuery puede utilizar este, cuando el contenedor es el id de la div:

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

Answer 2

Usando jQuery que debería ser capaz de usar:

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

Answer 3

Como se ha dicho, usando jQuery puede usar:

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

Por favor, tenga en cuenta el camino height se calcula mediante jQuery. citar el documentation:

Tenga en cuenta que .height() siempre devuelve la altura del contenido, independientemente del valor de la propiedad box-dimensionamiento de CSS.

Lo que esto significa es que ignorará cualquier margen, relleno y bordes que haya aplicado.

las alternativas nadie mencionado puede hacer uso de conseguir la altura exacta le interesa son las siguientes:

innerHeight()

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

Usar esta opción si desea no sólo el elemento altura, pero también incluye cualquier relleno.

outerHeight()

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

Usar esta opción si desea no sólo la altura de los elementos, sino también incluir cualquier relleno, bordes y márgenes (si es cierto es pasado como parámetro).

Ver DEMO

La demostración muestra cómo se aplica una altura de 300 píxeles a un div. Además, el css aplica margen superior de 20px, relleno superior de 50px así como bordes de 5px que afectan la altura total.

la producción de demostración para la altura()

Aviso aunque cómo jQuery height() todavía sólo devuelve 300 pixels, haciendo caso omiso de la altura adicional añadido al elemento a través de CSS.

la producción de demostración para innerHeight()

Aviso cómo jQuery innerHeight() retorno 350 píxeles, que es el 300 de la div + el 50 para el relleno.

la producción de demostración para outerHeight()

Aviso cómo jQuery outerHeight() retorno 360 píxeles, que es el 300 de la div + el 50 para el acolchado + 10 para el borde (5 inferior y 5 arriba).

la producción de demostración para outerHeight (true)

Aviso cómo jQuery outerHeight(true) retorno 380 píxeles, que es el 300 de la div + el 50 para el acolchado + 10 para el borde (5 abajo y 5 arriba) + 20 desde el margen.

Answer 4

he aquí una solución sin utilizar jquery

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

Esta función devolverá un objeto con las siguientes propiedades

• inferiores
• altura
• izquierda
• derecho
• superior
• anchura

Simplemente tome el ancho y la altura desde allí, son en píxeles

-N