Как я могу получить высоту элемента, используя только CSS

у нас есть много вариантов, чтобы получить высоту элемента с помощью jQuery и JavaScript.

но как мы можем получить высоту, используя только CSS?

Предположим, у меня есть div с динамическим контентом - поэтому он не имеет фиксированной высоты:

.dynamic-height {
   color: #000;
   font-size: 12px;
   height: auto;
   text-align: left;
}
<div class='dynamic-height'>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</div>

Я хочу, чтобы margin-top of .dynamic-height к значению, равному (the height of the div - 10px) использование только CSS.

если я получу высоту, я могу использовать CSS calc() функция.

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

6
css css3

2 ответов

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

ваше разрешение может быть достигнуто с помощью jQuery, или, альтернативно, вы можете подделать его с помощью CSS3 transform:translateY();

CSS Route

если мы предположим, что ваш целевой div в этом случае равен 200px high - это будет означать, что вы хотите, чтобы div имел запас из 190px?

это может быть достигнуто с помощью следующего CSS:

.dynamic-height {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    margin-top: -10px;
}

в этом случае, важно помнить, что translateY(100%) будет перемещать рассматриваемый элемент вниз в общей сложности его собственной длины.

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

маршрут jQuery

если подделка это не будет работать для вас, то ваш следующий лучший выбор будет чтобы реализовать скрипт jQuery, добавьте правильный CSS для вас.

jQuery(document).ready(function($){ //wait for the document to load
    $('.dynamic-height').each(function(){ //loop through each element with the .dynamic-height class
        $(this).css({
            'margin-top' : $(this).outerHeight() - 10 + 'px' //adjust the css rule for margin-top to equal the element height - 10px and add the measurement unit "px" for valid CSS
        });
    });
});
6

вы можете использовать параметр CSS calc для динамического вычисления высоты так

.dynamic-height {
   color: #000;
   font-size: 12px;
   margin-top: calc(100% - 10px);
   text-align: left;
}

<div class='dynamic-height'>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</div>
3