web頁面右側出現未知空白

Question

外觀如下：

[ ]

我在 ReactJS 中創建了該頁面，但我已在此處制作了該頁面的副本。

為了更好地顯示空白，這里是屏幕截圖：

幾個有趣的觀察：

• 首次加載頁面時，沒有這樣的問題。
• 當第二個圖像框（那里有 100% 條的那個）添加到 DOM 中時，問題才會出現
• screen.width = 375
• $('html').width() = 375, 還有
• 我不知道空白是如何出現的以及為什么出現，也找不到任何寬度 > 375 的元素。（雖然我沒有檢查所有元素）
• $('body').find('div').each(function(idx,e){if($(e).width() > 375) console.log($(e).width())})不會給我 output
• 我嘗試檢查那個白色區域，但不能。 這意味着給我看身體
• 此問題同時出現在 web 和移動設備上
• 我在上面顯示的代碼筆中的代碼沒有出現此問題，盡管該代碼是生成的 HTML 的精確副本（我直接從 Chrome Inspector 復制），刪除了所有 javascript

任何想法：1）為什么出現空白？ 2）我該如何解決這個問題？

PS：以防萬一你錯過了我把鏈接放到 CodePen 的部分，又來了。

更新 2：我將這個輸入框放在頁面外：

<input type="file" class="attache-upload-button" data-reactid=".0.0.1.3.1.1.0.0.1">

對應款式：

.review-add-form form .uploader .attache-upload-area .attache-upload-button {
  position: fixed;
  top: -1000px;
}

Answer 1

我用chrome inspector檢查了DOM，發現<svg class="bar">的寬度超出了范圍。 我試圖設置一個overflow: hidden到包含元素.progress-bar-circle ，並且空白消失了

Answer 2

將此添加到 css。

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

Answer 3

多次遇到這個問題，在我的例子中，它通常是一個 div 或一個元素，它穿過屏幕的寬度從而伸展開來，也許嘗試使用 chrome 開發工具進行分析並檢查布局，嘗試擺脫一些 div 並查看如果它改變了什么，或者可能減少絕對大小元素的寬度等。