擴展動態背景

我有一個居中的包裝div包括一個標題，三個內容列（基於內容長度（基於CSS）的動態高度和一個頁腳。擴展動態背景

現在我想要一個背景，它將這些元素的顏色向左和向右展開。

這裏是一個JS-小提琴演示：http://jsfiddle.net/SLvYx/

所以我想在左上角爲紅色，左側中央的是黃色的，左下角是綠色的，等等。我的第一個解決方案是使用寬度爲2500px的背景.png作爲主體，但是在識別出基本內容之後實現了基於內容的動態高度之前。

恐怕可能沒有純粹的基於html/css的解決方案，但JQuery或JavaScript也是一種選擇，儘管我只是一個關於腳本的初學者。也許我很想開箱即用，也許我必須重做整個html結構來完成這個任務，但我不介意。 :-)

我幾乎在任何地方搜索，但無法找到任何地方的具體情況。

幫助將非常感謝，所以感謝所有誰看着這一點。

編輯：我發現這篇文章：Dynamic table size html可能有幫助，也許這是一個解決方案，使用5列的表，第一爲左背景，第二至第四爲內容，第五爲右背景......這是熱烈推薦的，還是我應該保留表格？

這裏是我的演示的全部代碼再次：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> <title>Test</title> 
<style type="text/css"> 
body {margin:0;} 
#wrapper {margin: 0px auto; width: 940px;} 
#header {background:red; height:100px;} 
#content_wrapper {width: 940px; padding: 0px 0px 0px 0px; background: #CCC; overflow: hidden;} 
#leftcolumn {background:yellow; width: 470px; float:left; height:auto; min-height: 680px;} 
#middlecolumn {background:goldenrod; width: 235px; float:left; height:100%; margin-bottom: -1000px; padding-bottom: 1000px;} 
#rightcolumn {background:darkgoldenrod ; width: 235px; float:left; height:100%;margin-bottom: -1000px; padding-bottom: 1000px;} 
#footer {background:lightgreen; height:100px;} 
</style> 
</head> 
<body> 

<div id="wrapper"> 

    <div id="header"> 
     Header 
    </div> 

     <div id="content_wrapper">   

      <div id="leftcolumn"> 
       Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br /> 
      </div> 

      <div id="middlecolumn"> 
       Middle Column 
      </div> 

      <div id="rightcolumn"> 
       Right Column 
      </div> 

     </div>  

    <div id="footer"> 
     Footer 
    </div> 

</div>  

</body> 
</html>

來源

2012-09-27 Victor

不，你並不需要JavaScript或表。普通的ol'（基於div的）HTML和CSS將會訣竅。

你需要做的是稍微重構你的頁面。而不是依靠包裝div，堆疊你的三個主要部分，然後在每個你想要的寬度內有一個內部div。查看更新的JSFiddle。

我已經在類「inner」的每個部分中添加了一個（不可否認的）div，它獲得了940之後的寬度。

現在唯一的技巧是中間部分。你想要做的是創建一個非常寬的，短的圖像。說，3000px寬，1px高。將其分開50/50，使左側爲黃色，右側爲暗金色。如果您使用該圖像作爲content_wrapper的背景，並將其垂直平鋪，則會產生顏色偏離兩側的錯覺。這可以在大多數瀏覽器中使用。

如果您不關心舊版瀏覽器，甚至可以更進一步，並在content_wrapper的背景上使用CSS漸變。 See this even further updated Fiddle。

漸變在IE9或更低版本中不起作用 - 但沒關係，因爲圖像在樣式表中作爲後退。

來源

2012-09-28 12:42:53 chipcullen

是的，「內部」div做到了，很好，非常感謝！所以，我實際上想的太少了，嘿嘿。今天我已經用桌子進行了測試，這也是有效的，但是這個解決方案使html更清晰，即使是非語義的內部div。但是誰關心語義，畢竟它完美的工作:-)再次感謝！ – Victor

很高興幫助！ – chipcullen

擴展動態背景

回答

相關問題