정보실

웹학교

정보실

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

본문

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')




페이지 정보

조회 94회 ]  작성일18-06-14 11:14
css

웹학교