在div上溢出？

我已經創建了一個三列背景類型的東西，就像我之前在第一個問題中所描述的那樣：How to create a three-column website background using CSS?。不管怎麼說，我有它的工作大多是成功的，像這樣：在div上溢出？

我有ID centercolumn股利，包含所有我的網頁的內容（標題，內容，頁腳等）：

<html> 
    <body> 
     <div id="centercolumn"> 
      <!-- content --> 
     </div> 
    </body> 
</html>

然後，在CSS ，我有以下設置（只顯示相關的代碼）：

body { 
    background-image: url('theimagetobetiledalongthesides.png'); 
} 

#centercolumn { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 

    margin-left: auto; 
    margin-right: auto; 

    width: 760px; 

    background-image: url('theimagetobetiledalongthemiddlecontentcolumn.png'); 
}

從本質上講，機身提供了整個頁面的背景，那麼centercolumn DIV那張最重要的是，並一直延伸下來的頁面，並且具有不同的背景圖像。這給出了三列的外觀：一個在內容中間，兩個在側面。

我相信我遇到的問題是中心列div的overflow屬性。在我已經測試過的任何瀏覽器（Chrome，Firefox，IE，Opera和Safari）中，中心列最初一直到頁面底部（應該如此）。當我垂直調整頁面大小時，縮小頁面大小，一旦達到實際內容（即文本），滾動條就會出現在頁面/瀏覽器的側面（正常情況下）。但是，當我向下滾動以查看其餘內容時，就好像中心柱div不會一直向下：中心柱的不同背景圖像會部分停止（確切地說，瀏覽器底部的位置我向後滾動）。我的文本用完了中間列背景圖片，然後放到了主體的背景圖片上。

當我設置溢出的centercolumn DIV是scroll並開始調整大小的頁面，它工作正常（股利似乎一路走下來 - 在centercolumn背景圖像不切斷），但它創建一個相當醜陋的效果，滾動條實際上出現在中間內容列的側面而不是瀏覽器的側面。

我能做些什麼來讓中間內容列的不同背景圖像一路向下，而不會導致滾動條出現在中間列的邊上，因爲我會垂直調整瀏覽器窗口的大小？

編輯：在http://jsfiddle.net/dDfkC/1/的jsfiddle例子。

來源

2012-10-15 user1748196

你能證明你的代碼的工作示例？也許在[jsfiddle]（http://jsfiddle.net） – Ibu

@Ibu好吧，我有一個例子在http://jsfiddle.net/dDfkC/1/。我使用的是顏色而不是圖像，但它具有相同的效果（如果您垂直調整瀏覽器窗口的大小，則會在jsfiddle中向下滾動結果面板時看到）。 – user1748196

您正在使用什麼位置：絕對的，這是錯誤的，你想使用相對定位，然後頁邊距：0 auto;以此列爲中心。

你需要做的是將其設置

#centercolumn { 
    position:relative; 
    margin: 0 auto; 
    width:760px; 
    background-image: url(whatever); 
    background-repeat: both; 
}

如果你希望它擴展到頁面的底部，無論你的內容多麼小有：

body, html { 
    height:100%; 
}

，並添加以上

#centercolumn { 
    min-height: 100%; 
}

和一個真正的基本CSS復位：

* { 
    margin:0; 
    padding:0; 
}

來源

2012-10-15 22:20:57

這項工作幾乎完美，但現在中間的列並沒有一直走到頁面的頂部，它在頂端之前停了一下。我可以做些什麼來使它一直在頁面上下？ – user1748196

CSS重置，你所看到的是瀏覽器的默認邊距和填充...所以添加到你的CSS的開始：* {margin：0; padding：0;} –

奇妙地工作，謝謝！ – user1748196

你可以嘗試這樣的事：

#centercolumn { 
    position: absolute; 
    top: 0; 
    min-height:100%; 

    margin: auto; 

    width: 760px; 
    background-repeat: repeat-x; 
    background-image: url('theimagetobetiledalongthemiddlecontentcolumn.png'); 
}

可能會更好，看你有什麼一個例子，正是你想實現

來源

2012-10-15 22:20:42 Bloafer

在http://jsfiddle.net/dDfkC/1/上，您可以看到我的目標示例。我用顏色而不是圖像做了它，但它具有相同的確切效果。這不是一個重複的背景圖像的問題，我的垂直和水平自動重複（這是我想要的，只是垂直或水平不正確）。在jsfiddle中，您可以看到我的基本想法：包含內容的中心列和具有不同背景設計的兩個側欄。 – user1748196

試試這個http://jsfiddle.net/dDfkC/4/ – Bloafer

您可以使用左，右列和靜態定位固定定位的主柱，在本jsfiddle

來源

2012-10-15 22:24:22 nathan

除了他沒有這樣的標記以外，而且隨着內容的增長以及他將其他元素添加到他的容器中，這會導致它自己的問題。 –

@Patrick JC除了我添加的左列和右列之外，這是相同的標記;那些列在[在這個問題中]被描述（http://stackoverflow.com/questions/12903474/how-to-create-a-three-column-website-background-using-css），它被鏈接到第一個段。另外，這種方法會產生什麼問題？ – nathan

您添加了兩個新的div和一噸css來解決可以通過使用較少的css和不添加任何html標記來解決的問題。同樣，讓我們說他用內容填充這個中心列（可能是他打算這麼做的一個很好的選擇），給包裝器一個靜態的位置會導致浮動問題和不穩定的定位問題。另外，根據側欄的背景圖像，不要讓那些自然滾動的頁面看起來很滑稽並且會導致問題等。當您的解決方案有效時，它會引入其他問題的潛力，並且他會添加大量額外的代碼（真正地說）。 –

在div上溢出？

回答

相關問題