當滾動條存在時絕對div移位

Question

我的頁面的整個內容都有問題。
問題是沒有一個滾動條呈現我的內容是向右大約20px，但是當滾動條出現時，它向左移動。 我必須對絕對位置的div進行補償，方法是將其定位在內容上20px，直到滾動條停在頁面的右側。

這是我的一個蹩腳故障，但我只是想要一個簡單的方法來解決這個問題。任何快速和簡單的建議？將主內容分區設置爲絕對分區會更好嗎？

Answer 1

一個快速和骯髒的方式是要始終強制滾動條可見有：

html { overflow-y: scroll; }

不理想，但它規範了外觀，如果偏移缺少滾動條是破壞你的設計。

Answer 2

如果我正確理解你的問題，當滾動條存在時，你的絕對div是20px off？如果是這樣的話，你可以做的就是設置一個包含你的內容和絕對div的父div。

確保將此包裝div設置爲位置：relative;所以現在你的絕對div將被定位在相對的div而不是文檔級別。如果有滾動條，則包裝div將向左偏移20px（滾動條的寬度），絕對div也將偏移。

<div class="wrapper"> 
    your content goes here 
    <div class="absoluteDiv"></div> 
</div> 

.wrapper { position: relative; } 
.absoluteDiv { position: absolute; } 

Answer 3

我不認爲你的內容實際上是以任何一種越野車的方式轉移;只是滾動條的存在使得視口變窄。如果您使用的是依賴於視口寬度的佈局（例如流體佈局或以居中內容爲固定寬度），則這會導致所有內容在滾動條出現時移動一半寬度。

AFAIK，由於滾動條的寬度未知，因此沒有可靠的方法來彌補這一點。