有兩列全高背景？

我想製作一個帶有固定寬度的兩列的頁面，每個頁面都有自己的背景顏色，即使在滾動瀏覽大量內容時也會在頁面的整個高度上延伸。一個簡單的圖示澄清：https://dl.dropbox.com/u/3060536/twocol.png 有兩列全高背景？

我發現幾種解決方案，差不多做我想做的。

把height:100%無處不在，只要你不滾動看起來不錯：這似乎是相對於屏幕的高度（較長的文本向下滾動時，背景消失）。
把html和body放在height:100%上，min-height:100%放在其中一個div上，我可以讓一列填滿整個高度。但是這需要直接在身體下面完成，因此它似乎不能與我想要的居中的兩列布局組合。
將padding-bottom:100000px和margin-bottom:-100000px放在父列中，overflow-y:hidden放在父列中，如果所有內容都放在屏幕上，則工作正常，但如果文本不適合放在屏幕上，它將完全刪除向下滾動的選項。

所以以上都不符合我的要求。什麼是正確的方法來做到這一點？

來源

2013-03-03 user1111929

你也許能夠使用這樣的http://alistapart.com/article/fauxcolumns（而不是給你的元素的背景圖像/顏色） – NickSlash 2013-03-03 00:33:15

Flexbox的會爲你工作在現代瀏覽器 – 2013-03-03 00:35:33

@NickSlash這將工作，但我仍然希望找到一個解決方案，而不必不必要地使用平面顏色的圖像文件。 – user1111929 2013-03-03 00:40:30

-1

我沒有測試過這個，我很確定left: 50%; margin-left: -450px不能很好地將元素居中。但自從完成html以來，它已經有一段時間了。

#background: { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    width: 900px; 
    left: 50%; 
    margin-left: -450px; 
    background-color: red; 
} 
#background div { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    width: 200px; 
    background-color: blue; 
}

和HTML

<div id="content"></div> 
<div id="background"><div></div></div>

更新

正如我所說的，這是未經測試。事實證明，我忘記了包括height或bottom的#background，也可能是其他的東西。

這裏的想法的一個例子，它工作http://jsfiddle.net/bEuTU/

來源

2013-03-03 00:54:38 NickSlash

絕對定位應該只在絕對必要時才能完成。 – cimmanon 2013-03-03 02:29:25

我不確定'絕對'定位有什麼問題，但這僅僅是在內容背後有一層不與它進行交互的示例。我很確定CSS的其餘部分不太漂亮。 – NickSlash 2013-03-03 05:59:50

這是做了一個藍色固定的200px側邊欄左對齊。紅色部分甚至不可見。恐怕這種方式實際上並不奏效。 – user1111929 2013-03-04 16:09:27

-1

看一看blog post。我花了一段時間才瞭解它是如何工作的，但它確實很好。

來源

2013-03-03 01:12:35

您能否描述解決方案或在答案中提供示例，而不是鏈接到博客文章？我認爲這會更有幫助，對OP的問題更具體。也不保證下次有人想要檢查問題的答案時，博客文章就會存在。 – Zhihao 2013-03-03 01:21:30

你也許可以在這裏得到一些想法..如果位置：親戚不打擾你，試試這個。

<html> 
<head> 
<title>sample</title> 
</head> 

<body style="height:100%;"> 

<center> 
    <div style="position:relative; width:900px; height:100%;"> 

     <div style="position:relative; float:left; background-color:blue; width:200px; height:auto; min-height:100%;"> 
      '//some texts or controls 
     </div> 


     <div style="position:relative; float:left; background-color:green; width:700px; height:auto; min-height:100%;"> 
      '//some texts or controls 
     </div> 

    </div> 
</center> 

</body> 
</html>

來源

2013-03-03 06:23:18

這看起來不起作用，它給這裏不平等的高度列。你能重新檢查一下你寫的是什麼嗎？我不明白爲什麼它應該起作用，事實上當測試結果證明它不起作用時。 – user1111929 2013-03-04 14:40:47

有兩列全高背景？

回答

相關問題