분류 css

높이를 알 수 없는 경우 요소 높이를 0에서 auto로 전환

컨텐츠 정보

  • 조회 690 (작성일 )

본문

HTML : 

<div class="trigger">
  마우스를 올리면 높이가 자동 조정됩니다.
  <div class="el">CSS, JS는 놀라운 도구....</div>
</div>



CSS : 

.el {
  transition: max-height 0.5s;
  overflow: hidden;
  max-height: 0;
}
.trigger:hover > .el {
  max-height: var(--max-height);
}



Javascript : 

var el = document.querySelector('.el')
var height = el.scrollHeight
el.style.setProperty('--max-height', height + 'px')




css