調整瀏覽器窗口大小而導致的CSS定位更改

在我可以打電話給我的第一個網站之前，我還有一個問題需要解決，我會大大提供此社區的幫助。調整瀏覽器窗口大小而導致的CSS定位更改

你可以看到我的網站在自己www.dylanbisch.com

我試圖解決的問題在類artdesign和tumblr-wrapper之間的主屏幕出現。

基本上，類「artdesign」包含兩個圓形按鈕，類「tumblr-wrapper」包含主屏幕上的黑白照片。

如果您縮小瀏覽器窗口，然後嘗試向左和向右滾動，則會出現問題。而不是在整個頁面上左右滾動，只有「tumblr-wrapper」類中的黑白照片左右滾動。

我正在尋找一種解決方案，它可以在瀏覽器窗口很小時停止tumblr-wrapper的滾動，並且會創建整頁左右滾動。

我希望我已經充分解釋了問題，但如果我需要解釋不同的東西，請告訴我。

來源

2013-07-25 DB8

在這裏發佈一些代碼。 –

On line 370 of style.css，you have a position:fixed applied to the .artdesign。

林不知道是什麼邏輯是準確地把它放在那裏，但如果你刪除它，頁面會按照你的期望滾動。

固定位置意味着div是固定的並且不會移動（即使您滾動），它主要用於將頁眉和頁腳粘貼到頁面的頂部和底部。（像twitter bootstrap page [注意到沿着頂部的黑色標題菜單..這就是fixed？]）

所以基本上：

.artdesign { /* Line 370 of style.css */ 
    float: left; 
    padding: 200px 0 0 10px; 
    position: fixed; /* REMOVE THIS POSITION FIXED TO SCROLL! */ 
    width: 579px; 
    list-style-type: none; 
}

來源

2013-07-25 15:19:02 Anil

感謝您回答我的問題！我使用位置的邏輯：固定在第370行是允許上下滾動黑白照片，同時保持頁面的其餘部分位於相同的位置。如果我刪除此位置：固定，則向上和向下滾動適用於整個主頁，而不僅僅是黑白照片。 – DB8

你必須.artdesign設置爲「位置是：固定」所以這將永遠留在同一個窗口位置。將其更改爲「position：absolute」，這應該可以解決問題。

來源

2013-07-25 15:19:29 jtlowe

爲什麼'position：absolute' ?,我不明白爲什麼它在那裏呢？ – Anil

我不知道該網站的計劃是什麼，但我認爲有設置位置規則的原因。也許根本不需要它，但它提供了這個解決方案。 – jtlowe

謝謝你回答我的問題。我使用位置的邏輯：固定在第370行是允許上下滾動黑白照片，同時保持頁面的其餘部分位於相同的位置。如果我改變這個位置：固定在position：absolute，上下滾動適用於整個主頁，而不僅僅是黑白照片。 – DB8

調整瀏覽器窗口大小而導致的CSS定位更改

回答

相關問題