개발자
모바일 환경에서 하단 고정 컴포넌트가 넘칩니다.
pc 화면에서는 찾지 못했던 문제인데요, 웹을 배포 후에 모바일 환경으로 보니.. postion: fixed; bottom:0; 으로 하단 고정시켜놨던 컴포넌트가, 모바일 브라우저 창이 최 하단일 때에 아래로 더 밀어 내리면 브라우저창이 위로 뜨면서 생기는 밑 공백 부분에 위치하더라고요.. (브라우저 창을 넘어서) 컴포넌트 자체도 같이 브라우저와 함께 위로 떴으면 좋겠어요. 이런 경우는 어떻게 해결하는 것이 좋을까요? 구글링을 아무리 해봐도 찾기가 힘들어 질문 남겨봅니다.. ㅠㅠ (아래 상시 하단 고정되는 건 문제 없이 되는데, 모바일 환경에서 아래로 오버스크롤 하면 브라우저 창이 위로 뜨며 생긴 아래 공백 하단부에 컴포넌트가 위치하게 되는 상황) 사진은 조금 잘렸는데 클릭하면 전체화면으로 보실 수 있습니다.
-
답변 1
position: fixed 때문에 문서가 아닌 화면에서부터 위치를 잡은 것으로 보이네요 body를 relative로 하고 absolute bottom: 0로 바로 붙이는 방식은 어려울까요? react라면 portal, vue라면 teleport를 이용하여 맥락과 관계없는 위치에 붙일 수도 있습니다.
익명
작성자
2023년 11월 22일
답변 감사합니다.!!
익명
작성자
2023년 11월 22일
absolute로 해버리면 스크롤 위치에 따라서 하단 고정이 안 돼서요 ㅜㅠ답변 감사드립니다.
김주호
실시간 및 시계열 데이터 파이프라이닝 & 시각화 개발자 • 2023년 11월 22일
화면상에 계속 보이는게 목적이라면 body 바로 밑에 붙인후 position sticky로 밀어내거나 element. Style { position: sticky; top: calc(100vh - 100px); height: 100px; } 위치관련 이벤트(onscroll, intersection observer 등)을 리스닝해서 fixed를 쓰다가 맨 밑에 왔을때만 absolute로 바꾼다던지 하는 방법도 있을 것 같습니다 --- 채팅 박스같은 섹션이라면 차라리 감싸는 div <<- display: flex; flex-direction: column height: 100vh | V V ----- | | | | | | <<- overflow: scroll, flex: 1 | | ----- | | <<- display: block | | ----- 이렇게 가시는건 어떤가요
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!