如何刪除我網站一側的空白區域

Question

我有一個網站 ( https://olsenspkg.com )，每個頁面的右側都有空白區域。 目前我已經嘗試過這個來解決它：

 body { overflow-x: hidden !important; width: 100%; }

不過，它只能在 chrome 上修復它。 Safari 仍然表現得好像我沒有把代碼放進去。

常規站點視圖

右側的空白區域

Answer 1

此元素溢出：

<div id="searchBar">

寬度與父 div 相同。 將寬度更改為 300px 或完全更改渲染。

溢出 div

Answer 2

問題出在標題中的#searchBar 。 你給了它left:478px但它有 position:relative。 所以它仍然占據空間。 通過給它左邊478px它使您的網站向右大 478 像素。

所以刪除它並使用其他解決方案定位它。 就像一個簡單的#searchBar { text-align:right }我想可以解決問題。

還要盡量避免使用overflow-x: hidden on body 。 你永遠不知道你可能會導致什么問題。 總是在這種情況下嘗試找到導致此不需要的溢出的元素並處理該特定元素。