Khoảng trắng hiển thị ở bên phải của trang khi hình nền phải kéo dài toàn bộ chiều dài của trang [đã đóng]

110

Hình nền trang web của chúng tôi đang gặp sự cố trong FireFox cũng như Safari trong iOS trên iPad / iPhone với khoảng trắng hiển thị ở phía bên phải của trang.

Hình nền mở rộng tốt trên các trình duyệt khác nhưng chúng tôi gặp khó khăn khi không mở rộng toàn bộ chiều dài của trình duyệt trên các trình duyệt đó.

Hãy xem trang web của chúng tôi trên FireFox để hiểu ý tôi.

html  css 
— Dave
nguồn
Nếu bạn đang sử dụng framwork như bootstrap hoặc foundation, hãy kiểm tra xem cột bây giờ có phải là cột con đầu tiên của nội dung hay không, nhưng được lồng trong một div khác có một số loại đệm (nhỏ-12 fe).
— Lightningsoul
bạn đã giải quyết được chưa @Dave?
— gumuruh
Thật điên rồ phải không. 6 năm sau và iOS Safari vẫn đang hiển thị vấn đề này. Tôi đã thử nhiều giải pháp CSS, nhưng cuối cùng phải sử dụng jQuery. stackoverflow.com/a/45009357/391605
— Mike Gledhill

Câu trả lời:

266

Tôi đã thêm:

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

vào CSS của bạn ở trên cùng phía trên các lớp khác và nó dường như đã khắc phục được sự cố của bạn.

Tệp .css cập nhật của bạn có sẵn ở đây

— Rion Williams
nguồn
4
tuyệt vời, điều đó vừa sửa một lỗi cho tôi đã làm phiền tôi trong một thời gian!
— gleddy
22
Tôi đã gặp sự cố khi cuộn trên safari iphone với mã này, nó trở nên rất chậm. Cuối cùng thì tôi thấy nó là sự kết hợp giữa height: 100% và tràn-x: hidden, vì vậy tôi đã loại bỏ height: 100% và nó hoạt động tốt hơn nhiều.
— Paul Mason
Cảm ơn điều này đã làm việc như một sự quyến rũ. Tôi luôn tự hỏi làm cách nào để có được thanh cuộn gần như vô hạn. Không chắc tại sao điều này không được đánh dấu là câu trả lời.
— isurfbec bởi vì
5
Tôi nhận thấy rằng lớp 'hàng' của bootstrap đang đưa ra {margin-right: -15px} đang gây ra điều này trên trang của tôi.
— JosephK
2
Theo quan điểm của @ JosephK, vấn đề này thường phát sinh từ việc sử dụng sai các đối tượng vùng chứa, hàng và cột của Bootstrap, các đối tượng này sử dụng phần đệm và lề âm để bù trừ cho nhau một cách hoàn hảo, nhưng CHỈ KHI ĐƯỢC SỬ DỤNG đồng thời. Nếu không nó sẽ bị hỏng! Theo kinh nghiệm của tôi, đây là một trong những nguyên nhân phổ biến nhất gây ra khoảng trắng ở phía bên tay phải. Đối với một rực rỡ, giải thích hình ảnh của container, hàng, cột cho Bootstrap, trong đó có một cuộc thảo luận về vấn đề này và khác, hãy đọc này (không có tôi đã không viết nó): helloerik.com/...
— james
133

Gỡ lỗi CSS của bạn cho Phần tử CSS Ghost.

Sử dụng dấu trang này để gỡ lỗi CSS của bạn: https://blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwnking-scrolling/

Hoặc tự thêm CSS trực tiếp:

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

Trong trường hợp của tôi, nút Thích trên Facebook đã gây ra sự cố.

— tối ưu hóa
nguồn
1
điều này thực sự có ích
— Josan Iracheta
6
Giải pháp tuyệt vời! Điều này sẽ giúp bạn tìm ra gốc rễ của vấn đề và khắc phục nó một cách chính xác, và tất cả những gì nó yêu cầu là một vài dòng css.
— opdb
3
Đây phải là câu trả lời được IMO chấp nhận. Cá cược của tôi là hầu hết mọi người đã sử dụng 100vw làm chiều rộng của một thứ gì đó và kết quả là lỗi này. Đơn giản chỉ cần ẩn phần tràn là một giải pháp tối ưu phụ.
— Luke
Điều này thật ấn tượng, đã dành 2 giờ trên khoảng trắng chết tiệt đó, điều này đã giải quyết được nó.
— Carlos Roso
Chà, đã dành rất nhiều giờ và tìm ra thủ phạm chỉ với vài dòng mã. Cảm ơn người bạn đời :)
— Khpalwalk
55

Sau khi khám phá một số chiến lược hữu ích được cung cấp ở đây, tôi nhận thấy rằng mình chỉ cần thêm CSS cụ thể của iOS (tôi đặt nó ở cuối trang css chính của mình.) Có vẻ như ẩn-x là câu trả lời cho tôi. Tôi giả định rằng việc ghi rõ chiều rộng ở mức 100% sẽ giúp ích trong trường hợp nội dung của tôi có chiều rộng. Cần lưu ý rằng tôi chỉ gặp sự cố này trong iOS. Nếu nó cũng có trong Firefox, có lẽ chỉ nên sử dụng html và body block vì @media đang nhắm mục tiêu cụ thể đến các thiết bị di động.

@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;
  }

}

Xin vui lòng cho tôi nếu điều này có vẻ không chính xác với bất kỳ ai :)

— Jon Ryser
nguồn
5
Đây là điều duy nhất giải quyết được vấn đề của tôi
— JasonDavis
1
Cảm ơn - bản sửa lỗi tốt nhất cho tôi. Khá unobstrusive quá
— geedubb
Giải quyết điều này vấn đề và làm cho cảm giác cho không gian trắng di động
— Rob Gleeson
Sau khi áp dụng, thao tác cuộn trên Safari iphone6s bị lag. Tôi có thiếu một thuộc tính bổ sung cho Safari di động để làm cho nó hoạt động trơn tru không?
— Erik Rybalkin
câu trả lời tốt nhất cho tôi !!
— Youssef Boudaya
28

Đây là một câu hỏi khá cũ, nhưng tôi nghĩ rằng tôi sẽ thêm 2 xu của mình. Tôi đã thử các giải pháp ở trên, bao gồm cả ghost css, mà tôi chắc chắn sẽ lưu để sử dụng trong tương lai. Nhưng không ai trong số này hiệu quả trong tình huống của tôi. Đây là cách tôi khắc phục sự cố của mình. Hy vọng rằng điều này sẽ giúp một người khác.

Mở trình kiểm tra (hoặc bất kỳ tùy chọn nào của bạn) và bắt đầu với div đầu tiên trong thẻ nội dung, hãy thêm display: none; vào phần tử đó. Nếu thanh cuộn biến mất, bạn biết phần tử đó chứa phần tử gây ra sự cố. Sau đó, xóa quy tắc css đầu tiên và đi xuống một cấp vào phần tử chứa. Thêm css vào div đó và nếu thanh cuộn biến mất, bạn biết phần tử đó đang gây ra hoặc chứa phần tử vi phạm. Nếu việc thêm CSS không có tác dụng gì, bạn biết đó không phải div gây ra sự cố và một div khác trong vùng chứa đang gây ra sự cố hoặc chính vùng chứa đang gây ra sự cố.

Điều này có thể quá tốn thời gian đối với một số người. Thật may mắn cho tôi, vấn đề của tôi nằm ở phần đầu trang, nhưng tôi có thể tưởng tượng việc này sẽ mất một chút thời gian nếu vấn đề của bạn được hiển thị, ở phần chân trang hoặc thứ gì đó.

— gạch nối
nguồn
Phương pháp này đã giúp tôi tìm ra lỗi nhờ
— Bill
Yeah, hoặc bạn có thể đi xuống dom hidding divs mức cao nhất của từng người một, sau đó đi vào trong họ .. và vân vân
— hatenine
Đây thực sự là cách duy nhất để khắc phục thành công sự cố gốc khi bạn có các phần tử kỳ lạ như phần tử có height: 0hoặc height: 1. Trong trường hợp của tôi, tôi thấy nguyên nhân là lớp 'vô hình' một lang thang trong Drupal 7 lõi: drupal.org/node/2664214
— geerlingguy
10

overflow-x: hidden; hoạt động hoàn hảo cho tôi.

— Hom
nguồn
5

Vấn đề là trong tệp:

style.css - dòng 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;
}

loại bỏ các dòng:

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

Về cơ bản, điều này chỉ cung cấp một gradient bóng cho phần chân trang. Trong Firefox, đó là dòng đầu tiên gây ra sự cố.

— DMin
nguồn
2

Rõ ràng là (-o-min-device-pixel-ratio: 3/2) đang gây ra vấn đề. Trên trang web thử nghiệm của tôi, nó đã khiến phần bên phải bị cắt. Tôi đã tìm thấy một giải pháp thay thế trên github hiện hoạt động. Sử dụng (-o-min-device-pixel-ratio: ~ "3/2") có vẻ hoạt động tốt.

— Lu R.
nguồn
2

Tôi thấy câu hỏi đã được trả lời theo tiêu chuẩn chung, nhưng khi tôi nhìn vào trang web của bạn, tôi nhận thấy vẫn còn một thanh cuộn ngang. Tôi cũng nhận thấy lý do cho điều này: Bạn đã sử dụng mã:

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

đang được sử dụng cùng với mã cho biết phần tử có chiều rộng là 100%, tạo ra phần tử có tổng chiều rộng bằng 112% kích thước màn hình. Để khắc phục điều này, hãy xóa phần đệm, thay thế phần đệm bằng lề 12% để có hiệu ứng tương tự hoặc thay đổi chiều rộng (hoặc chiều rộng tối đa) của phần tử thành 88%. Điều này xảy ra trong main.css ở dòng 343. Hy vọng điều này sẽ hữu ích!

— HippoRustler
nguồn
Hoặc, đặt thuộc box-sizingtính thành border-box.
— Benpai
2

Tôi đã gặp vấn đề tương tự, vì vậy đã thử một vài cách. Một trong số đó dường như hiệu quả với tôi - loại bỏ chiều rộng và thêm dấu nổi vào thẻ body.

Có thể không hoạt động cho tất cả các trường hợp, nhưng trong kịch bản mà tôi đã có gần đây, ẩn phần tử nội dung tràn trên các phần tử nội dung là một việc không nên ...

— thiết kế sáng
nguồn
Tôi đã phải đặt html, body to width: 0 để loại bỏ phần tử ghost ở trên cùng trên Firefox.
— Garavani
1

Tôi đã gặp phải vạch trắng ở bên phải trên iPad của mình cũng như chỉ ở vị trí nằm ngang. Tôi đang sử dụng một div ở vị trí cố định với nền được đặt thành rộng 960px và chỉ số z là -999. Div cụ thể này chỉ hiển thị trên iPad do một truy vấn phương tiện. Sau đó, nội dung được đặt vào một trình bao bọc div rộng 960px. Các câu trả lời được cung cấp trên trang này không hữu ích trong trường hợp của tôi. Để khắc phục sự cố sọc trắng, tôi đã thay đổi chiều rộng của trình bao bọc nội dung thành 958px. Voilá. Không còn sọc trắng bên phải màu trắng trên iPad ở vị trí ngang.

— cuộc sống hiện đại
nguồn
1

Câu hỏi này đã được đặt ra trong một thời gian, nhưng không có bản sửa lỗi nào mà tôi có thể tìm thấy phù hợp với tôi (gặp vấn đề tương tự với ipad), nhưng tôi đã quản lý giải pháp của riêng mình mà sẽ phù hợp với hầu hết mọi người mà tôi tưởng tượng.

Đây là mã của tôi:

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

Thưởng thức!

— Michael
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.