爲什麼頁面移動到溢出容器的頂部：隱藏？

我遇到了一個很奇怪的問題。它在每個瀏覽器中。爲什麼頁面移動到溢出容器的頂部：隱藏？

一切正常，直到您嘗試使用哈希（如#contactUs在我的網頁）去一個部分......試試這個網址：http://mahersalam.co.cc/projects/2011/#contactUs

你會看到頁面的變化10px的到最佳。如果你脫掉散列，它會再次運行。

我有一個包含在頁面（#container）有溢出：隱藏，我這樣做，以確保如果分辨率更改沒有滾動條出現。如果你刪除溢出屬性，它也可以工作。

我想換擋發生在滾動條的位置，但是因爲它隱藏了所以只有停留的地方。

那麼有誰知道如何解決這個問題？

編輯：

我找到了解決方案，我寫下來的anwsers。

來源

2010-06-13 Maher4Ever

解決的辦法是刪除來自.rightCol和.leftCol的height:100%。

我想這些部分溢出是因爲高度屬性。

來源

2010-06-14 00:36:55 Maher4Ever

這確實是一個美觀的佈局。非常好。

無論如何，溢出似乎是從#headerWrap的頂部邊距中取出一塊，並將其添加到頁面的底部，它恰好是16像素。

到目前爲止，我已經嘗試過的任何工作。你能得到它，所以#container不會水平溢出？

編輯：沒關係;以下不工作...
從overflow: hidden;更改#container的風格overflow-y: hidden; ~~似乎 Firefox上~~ 工作是不是一個非常強大的解決方案。

來源

2010-06-13 22:43:53

謝謝你倆的客氣話。 @Bock：我試着在點擊時阻止頁面溢出，但我不知道到底是什麼溢出。它不僅是#headerWrap。這是一個奇怪的問題...我之前設計了幾個佈局，但這次這個問題沒有理由發生。您有任何建議可以解決問題，甚至可以阻止它從根本上解決問題嗎？再次感謝。 – Maher4Ever 2010-06-13 23:38:10

它*看起來像腳註，'leftCol'和'rightCol'導致水平溢出。殺死邊緣似乎是一種值得追求的途徑。但是'＃footerWrap'由於某種原因仍然會溢出。給它一個75em左右的最大寬度，可能會有所幫助。 – 2010-06-13 23:49:46

感謝您的幫助和時間。經過更多的測試看來，採取leftCol的高度：100％，並rightCol修復問題。我承認這很奇怪，因爲這隻發生在點擊url時發生。無論如何非常感謝。 – Maher4Ever 2010-06-14 00:04:47

我相信問題是片段標識符會導致容器在頁面滾動之前滾動。頁面完成後，容器元素的scrollTop值爲「16」。

下面是我在Firefox的greasemonkey中做的恢復缺失的區域。

window.addEventListener('scroll', 
    function(e) 
    { 
    var cont = document.getElementById("container"); 
    if (cont.scrollTop > 0) cont.scrollTop = 0; 
    }, 
    false);

那是什麼，當你回滾到頂部，缺少的空間顯示。

作爲一個解決方案，我不喜歡它，但它證明了您的問題所在，也許別人能想到的固定容器的scrollTop的更清潔的方式爲0

來源

2010-06-14 00:12:19 Alohci

如果我得到這個權利，這意味着瀏覽器處理這種情況的方式是錯誤的，對嗎？ – Maher4Ever 2010-06-14 00:33:40

@ Maher4Ever - 我不知道任何規範實際上涵蓋了如何在片段標識符的目標位於嵌套的可滾動元素內時分發瀏覽器滾動。然而，事實上瀏覽器製造商似乎確實存在共識，所以我想我們必須將其視爲功能而不是缺陷。 – Alohci 2010-06-14 07:45:40

爲什麼頁面移動到溢出容器的頂部：隱藏？

回答

相關問題