정보실

웹학교

정보실

css 높이를 알 수 없는 경우 요소 높이를 0에서 auto로 전환합니다.

본문

HTML : 

<div class="trigger">
  Hover me to see a height transition.
  <div class="el">content</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')



페이지 정보

조회 105회 ]  작성일18-08-31 23:35
css

웹학교