Как получить высоту DIV с учетом полей внутреннего элемента?

Question

Рассмотрим следующую разметку:

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

Я хочу получить фактическую конечную высоту outerElement, используя javascript . Я заметил, что если я удаляю вертикальные поля из innerElement, я могу получить то, что хочу, но не могу изменить стили из outerElement.

Как мне это сделать?

Obs: Я уже пробовал высоту, высоту прокрутки и высоту смещения во всех браузерах. Chrome дает мне ожидаемое значение (включая поля внутреннего элемента) для scrollHeight. Все остальные браузеры не работают.

Answer 1

Попробуйте использовать clientHeight

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

Я знаю, о чем ты думаешь ... "Это не сработает!" и увы, это не так ... но если вы сделаете что-то вроде добавления границы к outerElement ... даже на мгновение ...

* +1007 *

Не самое красивое решение, но оно работает, и если вы можете понять, почему это работает (я, черт возьми, не знаю: P), вы можете быть ближе к хорошо решение ...

Некоторые старые браузеры могут не поддерживать его, хотя ... вам придется изучить его; Я не могу перечислить их.