內容不滾動使用位置：絕對

在我正在處理的網站上，內容不滾動。所以在1024 x 768的顯示器上看不到圖像的頂部。我該如何解決這個問題？內容不滾動使用位置：絕對

2013-07-30 user196815

@MightyPork這不可能是nessecary。該代碼看起來像某種可怕的Dreamweaver生成的代碼，但他應該能夠修復它，而不會有太多問題。它只是一個定位問題。 –

放一個min-height上#main以像素爲單位，並將其設置爲position: relative;。

然後從#header作爲其不再nessecary刪除overflow: scroll。

這應該清除它。

#main { 
    min-height: 800px; 
    position: relative; 
} 

#header { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 768px; 
}

來源

2013-07-30 17:06:22

使用這個CSS艙不再連接到頁面的左下角。 – user196815

@ user196815請再次檢查。在我的測試中，它是。你確定你已經添加了位置：相對於#main？將來，如果你能夠創建一個jsfiddle（理想情況下是一個最小的測試用例）來說明你的問題，人們可以分叉和編輯它，並實際*顯示你的答案。在這種情況下，你只需要說出它的作用即可。我進入了Chrome的開發工具，並對上面列出的更改進行了修改，它確實可行，並且堅持到頁面的底部。你在哪裏以及如何測試這些代碼？ –

一種解決方案是：添加最小高度您div#main這樣並設置溢出汽車。同時將position設置爲relative。這樣，機艙（header）的圖像將位於#main - 集裝箱的底部：

#main{ 
    min-height: 768px; 
    overflow: auto; 
    position: relative; 
}

爲了避免難看的滾動條，千萬不要用overflow: scroll，總是使用overflow: auto代替。在這種情況下，集

#header { 
    position: absolute; 
    bottom: 0; 
    // The following values are not really necessary, 
    // as they are the default values or are calculated automatically 
    // to the same values, so feel free to remove them 
    width: 100%; // automatically calculated by the #header's contents 
    overflow: auto; // default value anyways 
    height: 768px; // automatically calculated by the #header's contents 
}

來源

2013-07-30 17:07:14 burnedikt

打了你一分鐘;-)。我想在這種情況下，他會比'overflow：auto'和'width：100％'更明確地使用'＃header'。 –

該死的你：P雖然我提供了一些永不使用'overflow：scroll'的額外生活智慧。 Booya！ – burnedikt

實際上，'overflow：auto'是反正的默認值，如果沒有設置其他樣式，但爲了清晰起見，我會離開它。 '＃header'上的'width：100％'和'height：768px'因爲它無論如何都適合其內容的大小，所以我會修改我的答案。 – burnedikt

內容不滾動使用位置：絕對

回答

相關問題