배경 이미지가 페이지 전체 길이로 확장되어야 할 때 페이지 오른쪽에 공백이 표시됨 [닫힘]

110

우리의 웹 페이지 배경 이미지는 페이지 오른쪽에 공백이 나타나는 iPad / iPhone의 iOS의 Safari뿐만 아니라 FireFox에서도 문제가 있습니다.

배경 이미지는 다른 브라우저에서 잘 확장되지만 해당 브라우저에서 브라우저의 전체 길이를 확장하지 않는 데 어려움이 있습니다.

테이크 파이어 폭스에 우리의 사이트에서 살펴 무슨 뜻인지 볼 수 있습니다.

html  css 
— 데이브
소스
부트 스트랩 또는 파운데이션과 같은 프레임 워크를 사용하는 경우 now column이 body의 첫 번째 자식이지만 일종의 패딩 (small-12 fe)이있는 다른 div에 중첩되어 있는지 확인합니다.
— Lightningsoul
@ 데이브를 해결 했습니까?
— gumuruh
미쳤지? 6 년이 지난 후에도 iOS Safari는 여전히이 문제를 보이고 있습니다. 수많은 CSS 솔루션을 시도했지만 결국 jQuery를 사용해야했습니다. stackoverflow.com/a/45009357/391605
— Mike Gledhill

답변:

266

나는 추가했다 :

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

다른 클래스보다 맨 위의 CSS에 삽입하면 문제가 해결되는 것 같습니다.

업데이트 된 .css 파일은 여기에서 사용할 수 있습니다.

— 리온 윌리엄스
소스
4
굉장합니다. 잠시 동안 나를 괴롭히는 버그를 수정했습니다!
— gleddy
22
이 코드로 safari iphone에서 스크롤하는 데 문제가 있었는데 매우 느려졌습니다. 결국 그것은 height : 100 %와 overflow-x : hidden의 조합이라는 것을 알았으므로 height : 100 %를 제거했고 훨씬 더 잘 작동합니다.
— Paul Mason
감사합니다. 이것은 매력처럼 작동했습니다. 나는 항상 거의 무한한 스크롤 바를 타는 방법을 궁금해했습니다. 왜 이것이 답변으로 표시되지 않았는지 잘 모르겠습니다.
— isurfbecause
5
부트 스트랩의 'row'클래스가 {margin-right : -15px}를 제공하여 내 페이지에서이 문제를 일으키는 것을 발견했습니다.
— JosephK
2
@JosephK의 관점에서,이 문제는 종종 패딩과 음수 여백을 사용하여 서로를 완벽하게 상쇄하지만 한꺼번에 적절하게 사용할 때만 부트 스트랩의 컨테이너, 행 및 열 개체를 잘못 사용하여 발생합니다. 그렇지 않으면 깨집니다! 제 경험상, 이것은 오른쪽에있는 공백의 가장 일반적인 원인 중 하나입니다. BRILLIANT의 경우이 문제 및 기타 문제에 대한 토론을 포함하여 Bootstrap의 컨테이너, 행, 열에 대한 시각적 설명을 보려면 다음을 읽어보십시오 (아니요, 작성하지 않았습니다). helloerik.com/…
— james
133

Ghost CSS Elements 용 CSS를 디버그하십시오.

이 책갈피를 사용하여 CSS를 디버그하십시오. https://blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/

또는 직접 CSS를 추가합니다.

* {
  background: #000 !important;
  color: #0f0 !important;
  outline: solid #f00 1px !important;
}

제 경우에는 Facebook 좋아요 버튼이 문제를 일으켰습니다.

— 낙천적
소스
1
이것은 정말 편리했습니다
— Josan Iracheta 2014 년
6
훌륭한 솔루션! 이렇게하면 문제의 원인을 찾아 올바르게 수정하는 데 도움이되며 몇 줄의 CSS 만 있으면됩니다.
— opdb
3
이것은 받아 들여진 대답 IMO 여야합니다. 내 장담은 대부분의 사람들이 100vw를 무언가의 너비로 사용하고 결과적 으로이 버그를 얻었습니다. 단순히 오버플로를 숨기는 것은 차선책입니다.
— Luke
이것은 대단한 공백에서 2 시간을 보냈고, 이것은 그것을 해결했습니다.
— Carlos Roso
와, 많은 시간을 보냈고 몇 줄의 코드만으로 범인을 찾았습니다. 고마워 친구 :)
— Khpalwalk
55

여기에 제공된 몇 가지 유용한 전략을 살펴본 후 iOS 특정 CSS 만 추가하면된다는 것을 알게되었습니다 (기본 CSS 시트의 맨 아래에 배치했습니다.). overflow-x를 숨기는 것이 저에게 답인 것 같습니다. 너비를 100 %로 지정하면 콘텐츠가 넓어지는 경우 도움이된다고 가정합니다. 이 문제는 iOS에서만 발생했습니다. Firefox에도있는 경우 @media가 특히 모바일 장치를 대상으로하므로 html 및 body 블록 만 사용해야합니다.

@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){

  html,
  body{
    width:100%;
    overflow-x:hidden;
  }

}

이것이 누구에게나 잘못된 것 같으면 나를 엉덩이하십시오 :)

— 존 라이저
소스
5
이건 내 문제를 해결하는 유일한 일이었다
— JasonDavis
1
고마워요. 너무
— 눈에 거슬리지
이 해결할 수있는 문제 모바일 공백에 대한 문제와 일리
— 롭 글리슨
적용 후 Safari iphone6s에서 스크롤이 느려집니다. 원활하게 작동하도록 모바일 Safari에 대한 추가 속성이 누락 되었습니까?
— Erik Rybalkin 2018
나를위한 최고의 답변 !!
— Youssef Boudaya
28

이것은 꽤 오래된 질문이지만 2 센트를 더할 것이라고 생각했습니다. 나는 고스트 CSS를 포함하여 위의 솔루션을 시도해 보았는데, 향후 사용을 위해 확실히 절약 할 것입니다. 그러나 이것들 중 어느 것도 내 상황에서 효과가 없었습니다. 문제를 해결 한 방법은 다음과 같습니다. 바라건대 이것은 다른 사람을 도울 것입니다.

인스펙터 (또는 원하는대로)를 열고 body 태그의 첫 번째 div부터 시작하여 display: none;해당 요소에만 추가 합니다. 스크롤 막대가 사라지면 해당 요소에 문제를 일으키는 요소가 포함 된 것입니다. 그런 다음 첫 번째 CSS 규칙을 제거하고 포함하는 요소로 한 수준 아래로 이동합니다. 해당 div에 CSS를 추가하고 스크롤 막대가 사라지면 요소가 문제를 일으키는 요소이거나이를 포함하고 있다는 것을 알 수 있습니다. CSS를 추가해도 아무 일도 일어나지 않으면 문제를 일으킨 div가 아니고 컨테이너의 다른 div가 원인이거나 컨테이너 자체가 원인임을 알 수 있습니다.

일부에게는 너무 많은 시간이 소요될 수 있습니다. 운 좋게도 내 문제는 머리글에 있었지만 문제가 바닥 글이나 무언가에 있다고 말하면 약간의 시간이 걸리는 것을 상상할 수 있습니다.

— 하이픈
소스
이 방법은 버그 감사를 찾는 데 도움이되었습니다
— Bill
그래, 또는 당신은 하나 하나, 그 다음 그 안으로 들어가 .. 등 최고 수준의 div의를 hidding DOM을 아래로 갈 수
— hatenine
이건 정말 성공적으로 당신이 가진 것과 같은 이상한 요소가 근본 문제를 해결할 수있는 유일한 방법입니다 height: 0또는 height: 1. 제 경우에는 원인이 Drupal 7 코어의 잘못된 '보이지 않는'클래스라는 것을 알았습니다. drupal.org/node/2664214
— geerlingguy
10

overflow-x: hidden; 나를 위해 완벽하게 작동합니다.

— 홈
소스
5

문제는 파일에 있습니다.

style.css-721 행

#sub_footer {
    background: url("../images/exterior/sub_footer.png") repeat-x;
    background: -moz-linear-gradient(0% 100% 90deg,#102c40, #091925);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#091925), to(#102c40));
    -moz-box-shadow: 3px 3px 4px #999999;
    -webkit-box-shadow: 3px 3px 4px #999999;
    box-shadow: 3px 3px 4px #999999;
    padding-top:10px;
    font-size:9px;
    min-height:40px;
}

줄을 제거하십시오.

-moz-box-shadow: 3px 3px 4px #999999;
-webkit-box-shadow: 3px 3px 4px #999999;
box-shadow: 3px 3px 4px #999999;

이것은 기본적으로 바닥 글에만 그림자 그라디언트를 제공합니다. Firefox에서는 문제를 일으키는 첫 번째 줄입니다.

— DMin
소스
2

분명히 (-o-min-device-pixel-ratio : 3/2) 문제를 일으키고 있습니다. 내 테스트 사이트에서 오른쪽이 잘리는 원인이되었습니다. 현재 작동 하는 github 에서 해결 방법을 찾았습니다 . (-o-min-device-pixel-ratio : ~ "3/2")를 사용하면 잘 작동하는 것 같습니다.

— 루 R.
소스
2

질문에 일반적인 표준에 대한 답변이있는 것을 보았지만 귀하의 사이트를 살펴보면 여전히 가로 스크롤 막대가 있음을 알았습니다. 나는 또한 이것에 대한 이유를 알아 차렸다 : 당신은 코드를 사용했다 :

.homepageconference .container {
padding-left: 12%;
}

이는 요소의 너비가 100 %라는 코드와 함께 사용되어 전체 너비가 화면 크기의 112 % 인 요소가됩니다. 이 문제를 해결하려면 패딩을 제거하거나 동일한 효과를 위해 여백을 12 %로 바꾸거나 요소의 너비 (또는 최대 너비)를 88 %로 변경합니다. 이것은 343 행의 main.css에서 발생합니다. 이것이 도움이되기를 바랍니다!

— 하마
소스
또는 box-sizing속성을로 설정합니다 border-box.
— Benpai
2

나는 같은 문제가 있었기 때문에 몇 가지를 시도했습니다. 그중 하나가 나를 위해 작동하는 것처럼 보였습니다. 너비를 제거하고 body 태그에 플로트를 추가했습니다.

모든 인스턴스에서 작동하지 않을 수 있지만 최근에 있었던 시나리오에서는 콘텐츠 요소에 오버플로를 숨기는 것이 불가능했습니다.

— 휘도 디자인
소스
Firefox에서 상단의 고스트 요소를 제거하려면 html, body를 width : 0으로 설정해야했습니다.
— Garavani 16.10.22
1

수평 위치에서만 iPad 오른쪽에 흰색 선이 나타납니다. 나는 배경이 960px로 설정되고 z-index가 -999로 설정된 고정 위치 div를 사용하고있었습니다. 이 특정 div는 미디어 쿼리로 인해 iPad에만 표시됩니다. 그런 다음 콘텐츠를 960px 너비의 div 래퍼에 넣었습니다. 이 페이지에 제공된 답변은 제 경우에 도움이되지 않았습니다. 흰색 줄무늬 문제를 해결하기 위해 콘텐츠 래퍼의 너비를 958px로 변경했습니다. Voilá. 수평 위치에서 iPad의 흰색 오른쪽 흰색 줄무늬가 더 이상 없습니다.

— 모던 포 라이프
소스
1

이 질문은 한동안 계속되어 왔지만 내가 찾을 수있는 수정 사항 중 어느 것도 나에게 효과가 없었지만 (ipad와 동일한 문제가 있음) 내가 상상하는 대부분의 사람들에게 효과가있는 나만의 솔루션을 관리했습니다.

내 코드는 다음과 같습니다.

html {
   background: url("../images/blahblah.jpg") repeat-y;
   min-width: 100%;
   background-size: contain;
}

즐겨!

— 남자 이름
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.