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

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

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

來源

2011-03-28 Ricki

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

html { overflow-y: scroll; }

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

來源

2011-03-28 19:50:13

它可能很髒，但它是我正在尋找的！ – Ricki 2011-04-05 15:15:04

如果我正確理解你的問題，當滾動條存在時，你的絕對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; }

來源

2011-03-28 18:19:53 Mark

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

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

來源

2011-03-28 18:20:42 eaj

我想知道，有沒有辦法使用JavaScript獲得滾動條的寬度？然後編寫一些JavaScript來調整CSS以保持與＆沒有滾動條相同的外觀。 – snowBlind 2011-05-27 21:35:00

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

回答

相關問題