티스토리 뷰

HMLT&CSS&JS/HTML&CSS&JS

[Mobile height] 체크

turfrain 2022. 7. 27. 11:43

css

.xxx {
  max-height : calc(100vh - 50px);
  max-height : calc(var(--vh, 1vh) * 100 - 50px);
}

 

js(jQuery)

<!-- 선언 -->
var vh = window.innerHeight * 0.01
  document.documentElement.style.setProperty('--vh', `${vh}px`)
  window.addEventListener('resize', () => {
    var vh = window.innerHeight * 0.01
    document.documentElement.style.setProperty('--vh', `${vh}px`)
})

<!-- 사용 -->
$(".xxx").css({ 
  "max-height" : "calc(100vh - " + "50px)",
  "max-height" : "calc(var(--vh, 1vh) * 100 - " + "50px)",
})

'HMLT&CSS&JS > HTML&CSS&JS' 카테고리의 다른 글

[버튼 효과 모음]  (0) 2018.07.06
# input 효과 (placeholder)  (0) 2013.08.01
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday