[쀼] 프론트앤드 에러 고치기 : 버튼 위치 개선, 로딩 컴포넌트화

상황 : 버튼 위치 이상 (CSS)

https://youtu.be/SkJryDvo6o0

버튼 위치가 이상한 에러

버튼 위치가 이상한 에러2

---

발생 원인

absolute로 device 화면 세로 길이에 상관 없이 버튼의 위치를 고정시키면서 생긴 문제

---

해결방안

문제1) 

화면 크기(100dvh)에서

맨 위 영역 (header), 맨 하단 영역 ( navbar ) 영역 제외한 부분 = 컨텐츠 영역 이 되도록 CSS 재작성

 

전체 화면 크기를 고정한다음에

tailwind-css에서 flex-grow 로 나머지를 차지하도록 설정. 단, overflow 되는 부분은 hidden으로 설정

그 다음에 그 내부에서 vvue-scroll(overflow-y: auto; scollbar-width:none;)과 maxHeight 설정하여 원하는 영역만 스크롤 되도록 변경

 

 

결과

https://youtu.be/SBK4S6kkwrg