.height () возвращает значение 0, если у div нет содержимого (только CSS)

Question

У меня есть div с фоновым изображением. Сам div не содержит ничего, кроме этого кода:

<div class="container" style="background-image: url(URL);"></div>

и кода CSS:

.container {

    width: 100%;
    overflow: hidden;
    margin-bottom: 0px;
    background-position-x: 50%;
    background-position-y: 50%;
    background-repeat-x: no-repeat;
    background-repeat-y: no-repeat;
    background-attachment: local;
    background-size: cover;
    display: block;
    position: relative;
    background-color: #FFFFFF;
    padding-top: 50%;

}

При попытке определить высоту с помощью:

var container_height = $('.container').height();

возвращает 0, хотя на самом деле его высота составляет приблизительно 200px.

Я предполагаю, что это потому, что контейнер не имеет содержимого, только фоновое изображениес верхней обивкой. Как мне это исправить, чтобы получить фактическую высоту?

Answer 1

var container_height =  $('.container').outerHeight();

Попробуйте использовать outerHeight () вместо:)