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

Vollanddzaft

Постоялец
Регистрация
12 Ноя 2014
Сообщения
68
Реакции
2
Добрый день, подкиньте небольшой скрипт, который может делать следующее:
Есть div - при наведении на него блок расширяется вниз. На данный момент высота задана принудительно через css. Нужно чтоб высота при наведении на блок подстраивалась в зависимости от содержимого блока.
Пример: Карточка товара - если есть у товара характеристики, то при наведении блок подстраивался под размер, например 50px, а если характеристик нет, тогда 0px.
 
Код:
.block:hover {height:auto;}
 
Спасибо за ответ, но выходит не совсем так. Я не уточнил что при наведении блок снизу имеет position:absolute. В связи с этим height:auto не сработает.
 
На данный момент высота задана принудительно через css. Нужно чтоб высота при наведении на блок подстраивалась в зависимости от содержимого блока.


overflow: hidden; - тебе в помощь. позиционирование блоков сделай relative, через CSS наложи эффекты увеличения блоков и все будет гуд.
пример реализации на чистом CSS без JS
rozetka.com.ua/search/?text=yjen%2Cer&section_id=80004&p=1
 
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>
 
Спасибо!Разобрался, действительно скрипты и не нужны!Единственное что я добавил в код это 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>
 
Назад
Сверху