2015-03-18 55 views
0

很久以前,我開始了一個新的主頁項目。我學會了自己建立一個主頁,所以我仍然在學習過程中。因此,我有時可能不會選擇實施某些東西的最佳方式。Div:沒有水平滾動的完整標題(不帶有箭頭鍵)

我想在我的網頁上有一個全寬的頁眉(和頁腳)。爲此,我創建了一些div標籤像下面這樣:

.header_container_overall-1 { 
 
\t height: 90px; 
 
\t width: 1000px; 
 
\t padding-left: 1000px; 
 
\t margin-left: -1000px; 
 
\t padding-right: 1000px; 
 
\t background-color: #f1f1f1; 
 
}

現在的問題是,一個瀏覽器(或移動裝置)示出了水平滾動條。我在一篇文章中讀到,我可以使用「overflow-x:hidden」。我將這段代碼應用到我的css文件的「body」類中。水平滾動條消失,但仍然可以使用鍵盤上的箭頭鍵滾動到右側。 不幸的是,我一直在編程我的網站知道這個錯誤(我想,我會稍後解決這個問題,但我認爲,這不是最好的主意)。但是,我現在回到了這個錯誤,並試圖修復它。我發現了幾個線程,在這種同樣的問題發生:

kennykee.com/118/div-100-width-without-horizo​​ntal-scroll-bar/

stackoverflow.com/questions/18274386/DIV-溢出是隱藏的,但是,仍然可以-滾動使用鍵盤右箭頭鍵

然後,我嘗試以下步驟:

  • 加入「溢出-x:隱藏;「到幾個類(特別是頁眉和頁腳類),以防止水平滾動。我嘗試了幾個選項,最後,我得到了一個網站,其中的頁眉和頁腳被裁剪在身體上(例如我的寬度爲1000px而不是全寬)。

  • 當我試圖使用「位置:相對;」或「位置:固定的」在不同的課程中,我最終確定,主頁面(現在由於頁邊空白和頁邊空白設置爲「自動」而居中)被設置在左側。

我希望你明白我的意思。這很難描述,甚至更糟,我的英語不好;-)。正如你所看到的,我有時甚至不知道自己在做什麼,而是在做什麼。這是越來越多的「嘗試和錯誤」,我現在到了desicion,我在我的HTML和CSS知識的末尾來解決這個問題。也許你現在可以看到問題,或者你有一個想法,我可以嘗試做什麼。

與描述錯誤的網站可以用: http://www.airlink.ch

CSS文件可得: http://www.airlink.ch/stylesheets/layout.css

如果您需要任何進一步的信息,請讓我知道。對於這個長時間的解釋抱歉。

此致敬禮

回答

0

我沒有閱讀過比你的CSS更多的文章。我很抱歉,但你不應該使用像填充1000 PX和邊距1000px的黑客。如果您想要一個全寬div,請將HTML和body元素設置爲寬度:100%。然後將寬度100%添加到頁眉/頁腳div。確保爲width =設備寬度添加元視口標記。一般來說,您應該快速搜索一些關於設備寬度和響應式設計的資源。

希望你能得到你想要的工作!