Как получить высоту 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

Я бы использовал jQuery.Попробуйте использовать

$("#myelementId").height()

и посмотрите, так ли это.

Answer 2

Добавьте clearfix, используйте jquery height () и снова удалите класс clearfix.

Это сработает. :)

Answer 3

Если вы можете установить для внешнего div стиль display : inline-block;, тогда scrollHeight будет включать поля дочерних элементов.

Это также будет работать, если вы установите стиль display : flex; (поддерживается IE 9 +)

Answer 4

try $ ("# myelementId"). OuterHeight (true)

Answer 5

WARNING WARNING clientHeight почти работает, но не содержит полей: (* ​​1002 *

Просто подумал, что я добавлю, что я пробовал это сегодня, и хотя nahumsilva & plodder почти правильно сделали это (версия nahumsilva, похоже, более кросс-браузерна {plodder, похоже, не работает в Chrome / WebKit, но я не эксперт по этим вопросам}), они оба упустили, что элемент может иметь вычисленные элементы стиля, которые не определены его собственным стилем.

Это сводило меня с ума - мне было интересно, где мои <p> элементы получали дополнительные 16px высоты поля - пока я не понял, что это исходит из вычисленного стиля.

Итак, короче говоря, подход, подобный nahumsilva / plodder, работал для меня с дополнительным условием, что вы должны получить вычисляемый стиль элемента с window.getComputedStyle( element, null ), который возвращает объект CSSStyleDeclaration (например, element.style). element.offsetHeight / element.clientHeight должен дать вам высоту без полей, поэтому все выглядит примерно так:

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

Answer 6

Этот ответ может быть немного очевидным, но если вы уже знаете поле, почему бы просто не добавить его вручную к высоте?

Answer 7

Полагаю, вам следует бросить все свойства элемента и сделать сумму только таким образом, чтобы вы могли точно знать высоту ... но в случае высоты это устанавливается, например, в clear: оба свойства я не думаю возможно узнать высоту элемента.

3-секундная мысль может выглядеть примерно так:

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

    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])

Но я полагаю, что вы должны также включить document.getElementById ('id'). Значение высоты, если оно есть .... является высоким, но может помочь ..

лучший =)

Answer 8

Это сложный вопрос, как то, что вы считаете «подходящей» высотой. Высота содержимого внутри, включая границы, как насчет заполнения или фактического использования полей? В большинстве случаев браузер действует довольно согласованно, но quirksmode может прояснить, что вам нужно. (Как подсказка, если вам нужен фактический запас, это повредит).

Answer 9

хорошо, тоже не красиво, но вот как я это делаю (отказ от ответственности: я украл это где-то один раз)

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 10

вы можете использовать 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

один из них обязан работать.