개발자
모바일 환경에서 하단 고정 컴포넌트가 넘칩니다.
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 | | ----- 이렇게 가시는건 어떤가요
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2023년 11월 22일
CSS position:fixed는 element를 화면에 고정시키지만, 모바일 브라우저에서의 동작은 데스크톱과 다릅니다. Safari와 같은 몇몇 모바일 웹브라우저들은 스크롤을 하거나 주소창이 사라지면서 viewport의 높이가 변할 때 fixed position elements의 위치를 조정합니다. 이 문제를 해결하기 위한 한 가지 방법으로 컴포넌트에 대한 상대적인 위치를 결정하는 부모 div를 사용하는 것입니다. 다음과 같이 코드를 작성해보세요: ```css body { position: relative; } .your-fixed-element { position: sticky; bottom:0; } ``` 이렇게 하면, `.your-fixed-element` 클래스가 적용된 element는 body에서 상대적으로 정의된 위치(bottom:0)에 '고정(sticky)'되며, 페이징 이동 시에도 항상 해당 위치에 잘 유지됩니다. 또한, 'sticky'는 최신의 모든 메인 웹브라우저에서 지원되므로 이 접근 방식을 사용하면 호환성 문제도 걱정하지 않아도 됩니다. 다만, 이러한 해결책이 모든 경우에 적합한 것은 아닙니다. 사용자가 페이지 아래로 스크롤하면서 URL 바가 사라지거나 등장함에 따라 viewport의 크기가 변하는 경우에 이 문제가 발생할 수 있습니다. 이 경우, JavaScript를 사용해 이러한 업데이트를 감지하고 조정할 수도 있습니다. 자바스크립트 해결책을 원한다면 추가로 알려주세요.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!