Динамическая высота при отсутствии блока div

Тема в разделе "JavaScript", создана пользователем Vollanddzaft, 14 май 2018.

Модераторы: ZiX
  1. Vollanddzaft

    Vollanddzaft Создатель

    Регистр.:
    12 ноя 2014
    Сообщения:
    34
    Симпатии:
    1
    Добрый день, подкиньте небольшой скрипт, который может делать следующее:
    Есть div - при наведении на него блок расширяется вниз. На данный момент высота задана принудительно через css. Нужно чтоб высота при наведении на блок подстраивалась в зависимости от содержимого блока.
    Пример: Карточка товара - если есть у товара характеристики, то при наведении блок подстраивался под размер, например 50px, а если характеристик нет, тогда 0px.
     
  2. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.149
    Симпатии:
    673
    Код:
    .block:hover {height:auto;}
     
  3. Vollanddzaft

    Vollanddzaft Создатель

    Регистр.:
    12 ноя 2014
    Сообщения:
    34
    Симпатии:
    1
    Спасибо за ответ, но выходит не совсем так. Я не уточнил что при наведении блок снизу имеет position:absolute. В связи с этим height:auto не сработает.
     
  4. romas_s

    romas_s

    Регистр.:
    9 ноя 2012
    Сообщения:
    245
    Симпатии:
    70

    overflow: hidden; - тебе в помощь. позиционирование блоков сделай relative, через CSS наложи эффекты увеличения блоков и все будет гуд.
    пример реализации на чистом CSS без JS
    rozetka.com.ua/search/?text=yjen%2Cer&section_id=80004&p=1
     
  5. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    471
    Симпатии:
    308
    HTML:
    <style>
      .top_block{
        border:1px solid gray;
        height:20px;
      }
     .children_block{
        position:absolute;
     }
     .top_block:hover{
        height:auto;
     }
     .top_block:hover .children_block{
        position:relative;
      }
    </style>
    <div class="top_block">
      <div class="children_block">
          бла-бла<br>
          бла-бла<br>
          бла-бла<br>
          бла-бла<br>
          бла-бла<br>
          бла-бла<br>
       </div>
    </div>
     
  6. Vollanddzaft

    Vollanddzaft Создатель

    Регистр.:
    12 ноя 2014
    Сообщения:
    34
    Симпатии:
    1
    Спасибо!Разобрался, действительно скрипты и не нужны!Единственное что я добавил в код это opacity - так как элементы тогда налазят друг на друга. А так все работает.
    Код:
    <style>
      .top_block{
        border:1px solid gray;
        height:20px;
      }
    .children_block{
        position:absolute;
        opacity:0;
    }
    .top_block:hover{
        height:auto;
    }
    .top_block:hover .children_block{
        position:relative;
        opacity:1;
      }
    </style>