모바일에서 스크롤 할 때 CSS 전체 화면 배경이 하단에 흰색 막대로 표시됨

Dec 07 2020

전체 화면 배경 이미지가있는 웹 사이트가 있습니다.

html, body {
  height: 100vh;
}

html {
  background: url('/img/background.jpg') no-repeat center center fixed;
  background-size: cover;
}

이 코드는 대부분의 기기에서 잘 작동하지만 일부 오래된 Android 기기에서는 아래로 스크롤 할 때 문제가 발생합니다. 부분적으로 아래로 스크롤하지만 손가락을 떼지 않으면 동시에 사라지는 URL 표시 줄과 동일한 크기의 흰색 막대가 표시됩니다. 손가락을 떼면 배경이 자동으로 고정됩니다.

이것은 이미지가 미드 스크롤처럼 보입니다.

배경이 항상 페이지를 채우도록하는 방법이 있습니까?

편집 : 또한 다음 속성으로 div를 추가해 보았습니다.

#background {
  background: url('/img/background.jpg') no-repeat center center fixed;
  background-size: cover;
  z-index: -100;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200vh;
}

이것은 배경을 보여 주지만 같은 문제가 발생합니다.

답변

AHaworth Dec 07 2020 at 04:44

IOS 및 최신 Android 기기에서 vh가 수정되어 100vh가 항상 최소 상단 표시 줄의 하단과 화면 하단 사이의 높이입니다.

구형 장치에서는 그렇지 않았기 때문에 사용자가 스크롤하여 브라우저 상단 막대 중 일부를 제거하면 vh가 변경됩니다.

이 수정은 사용자가보고있는 현상과 스크롤 할 때 요소의 크기가 '점프'되는 것을 막기 위해 도입되었습니다. 사용자가 처음 페이지에 들어갈 때 모든 배경이 표시되지 않는다는 또 다른 문제가 발생했습니다.

귀하의 경우에는 이미지 하단의 일정한 거리에 대한 단색 때문에 눈에 띄지 않습니다. 하단 근처에 텍스트가 있으면 중요합니다.

절대적으로 배치 된 요소 또는 동일한 배경을 가지고 있지만 100vh에 약간 더한 유사 요소를 사용하여 문제를 해결할 수 있습니다. 이것은 작동 할 수 있습니다. 이미지의 특성에 따라 시각적 인 결합을 제공합니다.

하지만 일반적인 해결책은 아닙니다.

localHacker Dec 07 2020 at 05:25

의사 요소를 사용해 볼 수 있지만 약간의 작업이 될 수 있지만 잠재적으로 문제를 해결할 수 있습니다.

html, body {
height: 100vh;
width: 100vw;
position: relative;
z-index: 2;
}

body::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background: url('/img/background.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
z-index: 1;
}

JosueMurhabazi Dec 12 2020 at 21:52

이 시도. 항상 페이지를 채우는 배경을 만들 것입니다.

html, body {
  height: 100vh;
}

html {
  background: url('/img/background.jpg') no-repeat center center fixed;
  background-size: cover;

  position: absolute;
}

Paul Dec 15 2020 at 17:05

메인 앱 배경을 검은 색으로 설정하고 작은 검은 색 줄무늬가 혼합 된 배경 사진을 확장하면 어떨까요? 이것은 Android 버그 / 기능처럼 들립니다.

MohamadNateqi Dec 16 2020 at 20:49

시도해 보셨나요?

html {
   min-height: 100vh;
}

이것은 귀하의 문제와 비슷한 아래 링크 질문에서 제안됩니다.

https://stackoverflow.com/a/47372972/6119844

myjobistobehappy Dec 11 2020 at 12:24

어떻게해야할지 몰라서 찾아 보았습니다. Safari모든 웹 사이트에서이 작업을 수행하는 경향이 있지만 귀하의 경우에 맞게 수정할 수 있습니다. 나는 그것을 고치는 방법 에 대한 몇 가지 유사한 질문을 발견 Stack Overflow했습니다. 아래에 몇 가지 해결책을 제시하겠습니다.

배경에 스크롤 클래스 추가

html,
body {
 height: 100%;
 margin: 0;
 overflow: hidden;
}
.scroll {
 overflow: auto;
 height: 100%;
}

오버플로 스크롤 방지

html,
body {
 -webkit-overflow-scrolling: auto;
}

iNoBounce 라이브러리 사용

이 라이브러리는 여기 에서 찾을 수 있습니다 . 다른 방법이 작동하지 않는 경우 이것이 마지막 수단이어야합니다. 소유자는 2018 년 이후로 새로운 업데이트를 출시하지 않았지만 지금은 내 테스트를 통해 작동했습니다. 해피 코딩 :)

AliAnsari Dec 17 2020 at 19:58

시도해보세요. 420은 일반적인 모바일 화면 크기입니다. ??? 요소 높이에 따라

@media screen and (max-width: 420px) {
  .sampleCSSclass {
    height: calc(100vh - ????px);
  }
}

Author Dec 17 2020 at 22:08

스크롤바가 완전히 사용되지 않는 경우 본문에 숨겨진 oveflow를 추가 할 수 있으며 오버플로가 표시되지 않습니다. 여백과 패딩을 0으로 설정하십시오.

Dingus45191 Dec 17 2020 at 23:22

그것은 height: 100vh;당신이 키를 늘릴 필요가 있기 때문입니다 . 시도 height:100%하거나 시도 해야 할 수도 있습니다.min-height: 100vh;