CSS - 解決由平鋪自動大小圖像覆蓋的滾動條

Question

我發現這個網站上的一些很棒的幫助，幫助我在固定標題的任一側上平鋪圖像。我遇到的一個問題是右側的滾動條正在被平鋪圖像覆蓋並且變得無法訪問。我相信這很簡單，但我目前處於虧損狀態。您可以在此處查看示例：http://www.jzandecki.com/example

Answer 1

您需要從頭開始重新構建標題。首先創建一個div（這將是你的標題容器），用id命名讓我們說「header」。將平鋪的黑色圖像添加爲背景。該div的位置應該是固定的而不是絕對的。

position: fixed; 
background: url("../images/example_top.jpg") repeat scroll 0 0 transparent; 
background-repeat: repeat-x; 
height: 178px; 
width: 100%; 

在您的標題div中添加另一個div，其寬度大小爲您的發電站圖像的寬度。將該div的css設置爲margin：auto（將其居中放置在屏幕中）。

margin: auto; 

這應該做的工作。 如果這項工作，你應該有你曾經有過的相同的看法，但你的滾動條將在你的頭頂上，而不是隱藏。

編輯：

當我看到你的身體是在屏幕的左側900像素和棍棒的方式。我建議你對你的身體有以下屬性：

margin: 0; 
padding: 0; 

身體應該佔據整個頁面。 如果你想爲你的內容添加一個900 px包裝塊，請在你的頭部div之後添加一個div（如上所述）。這個新的div應該有以下css屬性：

width: 900px; 
margin: auto; //this centers your div in the middle of your screen 
//Other styles that have nothing to do with positioning 

祝你好運。