정보실

웹학교

정보실

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




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

페이지 정보

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

웹학교