2012-01-05 54 views
3

當垂直滾動條被隱藏時,我有一個固定寬度的3列css佈局工作良好,但垂直滾動條出現時它會立即中斷。當滾動條可見時頁面佈局會中斷 - 是否有CSS修復?

我有2個問題,

  1. 我可以處理滾動條爲定義的z-index使它在正確的div頂部的CSS元素?

  2. 因爲我認爲我的第一個問題的答案是「不,你不能這樣做」,我問我能做些什麼來避免這種情況?

例如這裏:

http://www.mataborrao.eu/teste.html

+0

頁面如何中斷?你的第一個問題的答案是 – 2012-01-05 16:38:29

+0

你好,謝謝你的回覆,分頁符,因爲右邊的div,紅色的下降。我想在添加滾動條時,dom會自動重新計算div的寬度,但現在我發現,在不同的瀏覽器中,在不同的os(mac/win)滾動條寬度上也不一樣... – Pluda 2012-01-05 16:42:53

+2

Pluda,你應該接受一個答案,將鼓勵人們回答你未來的問題。 – 2012-01-07 16:24:49

回答

0

此解決方案適合您嗎?其中一列是流動的,但也許它會幫助:http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

的解決方案是有一個佈局,看起來像這樣:enter image description here

是微不足道的退出像素值,但把「div嵌套結構的注意事項」。要將其轉換爲固定佈局,您可以查看http://matthewjamestaylor.com/blog/how-to-convert-a-liquid-layout-to-fixed-width - 我不確定它會如何工作 - 您可能遇到同樣的問題。我建議液體佈局,因爲它會動態調整大小,當滾動條在那裏...

+0

謝謝,需要試試這個,這似乎是解決這個問題的好方法。今天我沒有在這裏的代碼,但明天我會讓你知道,好嗎?謝謝。 – Pluda 2012-01-07 12:44:05

+0

真棒 - 我認爲這工作... – jcuenod 2012-01-08 19:55:17

2

你回答你的第一個問題是正確的;據我所知,你不能將樣式附加到滾動條上。你的第二個問題有些寬泛,因爲許多瀏覽器會以不同的方式處理滾動條。

例如,根據您的操作系統/瀏覽器,您網頁上的內容將會移動以騰出位置,而其他瀏覽器(例如Windows上的FF,我相信)會將內容保留在原來的位置如果沒有滾動條(如果有更多內容垂直添加/流動,這可以防止移動)。

或者,你可以嘗試迫使巴總是在那裏...這將適用於大多數情況:

html { 
overflow: -moz-scrollbars-vertical; 
overflow-y: scroll; 
} 

希望這有點幫助?