정보실

웹학교

정보실

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



  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

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

웹학교