CSS fixed div。避免不必要的重疊

我有一個由2列組成的CSS佈局。左側的導航欄是修復div。它在列中向右滾動主要內容的同時保持在那裏。CSS fixed div。避免不必要的重疊

當我縮小瀏覽器窗口或放大瀏覽器窗口時，問題出現了：當水平滾動瀏覽器窗口時，右側的主要內容開始與左側的導航欄重疊。

我該如何解決它，以便無論我的瀏覽器窗口或縮放級別的大小是多少，當我水平滾動時，固定div不會重疊，但會將主列向右推？

你可以看到這是真的：http://justarandomone.tumblr.com/

所有的代碼是在源（這是相當混亂，遺憾的是）。

希望有人能幫上忙。謝謝！

來源

2012-04-04 Justa Randomone

我似乎無法重複該問題。這對我來說很好。你查看這個問題的瀏覽器/版本和操作系統是什麼？也許你可以發佈問題的屏幕截圖或涉及的代碼。 – cereallarceny 2012-04-04 20:14:47

不是我認爲的問題.. 無論如何，我認爲你可以修復它把內容的主要塊放在一個div並給它絕對定位。刪除浮動：從側邊欄左側，這是沒有必要的。

#container { 
    width:751px; 
    margin-top:56px; 
} 

#sidebar { 
    width:235px; 
    position:fixed; 
    top: 0px; 
    left: 0px; 
} 
#content { 
    position: absolute; 
    top: 0px; 
    left: 235px; 
    width: 516px; /* 751 -235 */ 
}

來源

2012-04-04 20:32:12 Valentino

我可以在將Chrome縮小到非常小的窗口大小以及在iPhone上時重新創建。將側欄div設置爲position:fixed將強制它停留在該位置;導致水平滾動問題。

我切換側邊欄position:absolute，然後同步了側邊欄和blogroll的top-margin，它似乎工作正常。

來源

2012-04-04 20:46:05

可能的建議。使用CSS將'blogroll'和'sidebar'高度設置爲相同的值（本例中我使用了100％）。這些添加'overflow：auto;'爲「網誌串連」

#sidebar { 
    width:235px; 
    height:100%; 
    float:left; 
    clear:both; 
    position:fixed; 
} 

#blogroll { 
    width:558px; 
    margin-left:290px; 
    position:absolute; 
    min-height:300px; 
    height: 100%; 
    overflow:auto; 
    padding-bottom:27px; 
    padding-top: 171px; 
}

這將導致的blogroll有頁面（這樣人會使用它們，並且，理論上，頁面不會有任何。爲了確保，將你的身體裏面它自己的滾動條頁邊距爲0即爲應該可以工作

來源

2012-04-04 21:12:17

您可以給#sidebar一個純色背景（例如白色）;將它放在堆棧頂部，並使用z-index（任何大於z-索引的數字右邊，例如1）;另外，您可能想要拉伸高度爲100％的#sidebar，最後，您可能希望＃邊欄覆蓋左側的整個高度，您可以添加「top： 0「來實現。

來源

2013-01-06 06:57:48 ssssszzzzz

CSS fixed div。避免不必要的重疊

回答

相關問題