¿Cómo obtener la altura de un DIV considerando los márgenes del elemento interno? Considere

Question

de marcado siguiente:

<div id="outerElement"> 
    <div id="innerElement" style="border: 1px solid blue; background-color: #f0f3f5; margin-top: 100px"> 
     TESTE 
    </div> 
</div> 

quiero conseguir la altura final real de outerElement usando javascript. Observé que si eliminé los márgenes verticales de innerElement puedo obtener lo que quiero pero no puedo modificar los estilos desde el outerElement.

¿Cómo puedo hacer esto?

Obs: Ya probé la altura, la altura de desplazamiento y la distanciaAltura en todos los navegadores. Chrome me da el valor esperado (incluidos los márgenes del elemento interno) para scrollHeight. Todos los otros navegadores fallan.

Answer 1

Intente utilizar clientHeight

var outerElement = document.getElementById("outerElement"); 
if(outerElement.clientHeight) { 
alert("Height is "+outerElement.clientHeight+"px"); 
} 
else { alert("Old browser?"); } 

Sé lo que estás pensando ... "esto no va a funcionar!" y por desgracia, no es así ... pero si lo hace algo así como añadir un borde a outerElement ... aunque solo sea por un momento ...

var outerElement = document.getElementById("outerElement"); 
outerElement.style.border = "1px solid black"; 
var height = outerElement.clientHeight; 
outerElement.style.border = "none"; 
alert("Height is "+height+"px"); 

No es la solución más bella pero funciona, y si se puede averiguar qué es que funciona (te aseguro que no saben: P) que podría estar más cerca de una solución buena ...

Algunos navegadores antiguos no sean compatibles con él sin embargo ... se Tendría que investigarlo; No puedo enumerarlos.

Answer 2

Usaría jQuery. Intente usar

$("#myelementId").height() 

Y vea si eso lo hace.

Answer 3

podría utilizar jQuery:

$('#outerElement').height(); // gets the height of the div 
$('#outerElement').outerHeight(); // gets the height of the div including margins and padding 
$('#outerElement').innerHeight(); // gets the height of the div including padding 

uno de esos está obligado a trabajar.

Answer 4

bien tampoco bonita, pero así es como lo hago (exención de responsabilidad: He ganado esto desde algún lugar una vez)

var height = elem.clientHeight + getBufferHeight(elem, true); 

function getBufferHeight(elem, includeMargins) { 
    if (!elem.visible()) { 
     return 0; 
    } 
    //do new Number instead of parseFloat to avoid rounding errors 
    var result = 0; 
    if (includeMargins) { 
     result = 
      new Number(elem.getStyle('marginTop').replace(/[^\d\.]/g, '')).ceil() + 
      new Number(elem.getStyle('marginBottom').replace(/[^\d\.]/g, '')).ceil(); 
    }  
    result += 
     new Number(elem.getStyle('borderBottomWidth').replace(/[^\d\.]/g, '')).ceil() + 
     new Number(elem.getStyle('borderTopWidth').replace(/[^\d\.]/g, '')).ceil() +  
     new Number(elem.getStyle('paddingTop').replace(/[^\d\.]/g, '')).ceil() + 
     new Number(elem.getStyle('paddingBottom').replace(/[^\d\.]/g, '')).ceil();       
    return result; 
} 

Answer 5

Esta es una pregunta difícil ya que ¿qué discernir como la altura "adecuada". La altura del contenido en el interior, incluidas las fronteras, ¿qué pasa con el relleno o el uso del margen real? En general, el navegador actúa de manera bastante consistente en la mayoría de las cosas, pero quirksmode puede aclarar lo que necesita. (Como sugerencia, si necesita el margen real utilizado, le va a doler).

Answer 6

Supongo que debe ir arrojar todas las propiedades de los elementos y hacer una suma solo de esta manera se puede saber la altura exacta ... pero en el caso de la altura se establece por ejemplo claro: ambas propiedades no pensar es posible conocer la altura de un Elemento.

Un pensamiento 3 seg podría ser algo como:

var o document.getElementById ('id').estilo;

var total = ((o.height.split("px")[0] == "") ? 0 : o.height.split("px")[0]) + 
((o.marginTop.split("px")[0] == "") ? 0 : o.marginTop.split("px")[0]) + 
((o.marginBottom.split("px")[0] == "") ? 0 : o.marginBottom.split("px")[0]) + 
((o.paddingTop.split("px")[0] == "") ? 0 : o.paddingTop.split("px")[0]) + 
    ((o.borderTop.split("px")[0] == "") ? 0 : o.borderTop.split("px")[0]) + 
((o.borderBottom.split("px")[0] == "") ? 0 : o.borderBottom.split("px")[0]) 

Pero supongo que debe incluir también la document.getElementById ('id'). Valor de la altura si tenga que .... es thougth pero puede ayudar ..

mejores =)

Answer 7

Esta respuesta puede ser un poco obvia, pero si ya conoce el margen, ¿por qué no simplemente agregarlo manualmente a la altura?

Answer 8

ADVERTENCIA ADVERTENCIA clientHeight casi obras, pero no incluye los márgenes :(

Sólo que me gustaría añadir que he estado tratando de esto hoy, y mientras nahumsilva & plodder casi tiene las cosas bien (la versión de nahumsilva parece ser más cross-browser {plodder's no parece funcionar en Chrome/WebKit, pero no soy experto en estas cosas}), ambos han pasado por alto que un elemento puede haber calculado elementos de estilo que no están definidos por su propio estilo

Esto me estaba volviendo loco - Me preguntaba dónde estaban obteniendo los elementos <p> 16px adicionales de margen de altura - hasta que me di cuenta de que venía del estilo computado.

Así, el cuento largo, un enfoque como nahumsilva/plodder trabajó para mí, con la condición adicional de que usted debe conseguir el estilo computada del elemento con window.getComputedStyle(element, null), que devuelve un objeto CSSStyleDeclaration (como element.style). element.offsetHeight/element.clientHeight debe darle la altura sin márgenes, por lo que todo el asunto es así:

var cstyle = window.getComputedStyle(element, null); 
var elementHeight = element.offsetHeight + 
Number(cstyle.marginBottom.replace(/[^\d\.]/g, '')) + 
Number(cstyle.marginTop.replace(/[^\d\.]/g, '')); 

Answer 9

Añadir clearfix, utilización altura jQuery() y retire la clase clearfix nuevo.

Eso va a funcionar. :)

Answer 10

tratar $("#myelementId").outerHeight(true)

Answer 11

Si se puede establecer el div exterior al estilo display : inline-block; continuación scrollHeight incluirá los márgenes de elementos secundarios.

También funcionará si se establece el estilo display : flex; (apoyado por el IE 9 o superior)