Получить предпочтительную высоту div

0

Я использую расширение chrome, чтобы свернуть некоторые разделы на веб-страницах. И все работает очень хорошо. Я сделал это так, чтобы он имел высоту 50 пикселей, и когда вы наводите на него курсор, он становится такой высотой, как обычно. Короче говоря, это мой код:

  • Проверьте высоту div → checkedHeight
  • Применение правила CSS: max-height: 50px
  • Применить правило CSS при наведении: max-height: checkedHeight

Это работает как шарм. Но!!! Когда div загружает дополнительный контент, он становится длиннее. В любом случае я могу установить максимальную высоту как предпочтительную высоту элемента? Я знаю, что просто не могу использовать max-height, но я хочу использовать css3-переходы, чтобы div расширялся постепенно.

  • 1
    Как насчет max-height: auto?
Теги:

2 ответа

1

Использовать element.scrollHeight

Вот пример

<script>
    function collapse(target) {
        target.style.maxHeight = '50px';
    }
    function expand(target) {
        target.style.maxHeight = target.scrollHeight + 'px';
    }
</script>

<style>
    #test {
        max-height: 50px;
        background:lightgray;
        overflow: hidden;

        -moz-transition: 1s;
        -ms-transition: 1s;
        -o-transition: 1s;
        -webkit-transition: 1s;
        transition: 1s;
    }
</style>

<div id="test" onmouseover="expand(this)" onmouseout="collapse(this)">
    text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>
    text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>
    text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>
</div>
Поделиться
1

Не могли бы вы просто установить max-height: none при падении?

Поделиться
  • 0
    Я мог бы. Но не было бы никакого перехода. Максимальная высота от A до B сделает переход div от его небольшой высоты к большой высоте. От A к None не будет переход, он просто будет там внезапно.
  • 0
    а как насчет установки максимальной высоты, например, 999px, при зависании?
Показать ещё 7 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню