當內容很少時，獲取整頁div欄以適應內頁頁面

Question

我遇到了一些html佈局問題。
基本的IDE是在頁眉和頁腳之間有3列。
中間一列是固定的，兩邊是剩下的東西。 雙方必須有不同的圖像背景。 你可以在這裏看到我的意思 - >http://assets.nbn-studio.com/3cols.html。
問題是內容有時比窗口小，但由於我已將列設置爲100％，因此頁腳始終低於頁面底部。 我嘗試過不同的事情，但似乎無法做到正確。
不介意圖像，但我必須顯示一些意思。此外，所有這些都必須在IE7及更高版本中運行。
此外，雙方將沒有內容，但背景圖像。 我會很感激任何想法。

UPDATE： 這裏就是我說的：

鏈接到圖片：http://i49.tinypic.com/1zeju2t.jpg

Answer 1

我有一個搜索解決方案n有一些小小的限制，但對於比IE6/7更新的瀏覽器來說工作起來還算合理。

你可以看到工作頁：http://jsfiddle.net/audetwebdesign/6jnWE/show/

，並查看一下代碼，CSS：http://jsfiddle.net/audetwebdesign/6jnWE

的CSS是這樣的：

* { 
    margin: 0; 
    padding: 0; 
} 
html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 
#header { 
    background: url(http://assets.nbn-studio.com/apache_pb.gif) #CC0; 
    height: 10%; 
    min-height: 50px; 
    width: 100%; 
} 
#wrap-outer { 
    width: 100%; 
    height: 80%; 
    display: table; 
} 
#side-left { 
    display: table-cell; 
    vertical-align: top; 
    background: url(http://assets.nbn-studio.com/arrow-left-2.png) right top repeat; 
    height: inherit; 
} 
#left-content { 
    float: right; 
    background: url(http://assets.nbn-studio.com/arrow-left.png) repeat-y; 
    width: 150px; 
    height: 100%; 
} 
#content { 
    display: table-cell; 
    vertical-align: top; 
    width: 800px; 
    background: url(http://assets.nbn-studio.com/knot.png) repeat; 
} 
#side-right { 
    display: table-cell; 
    vertical-align: top; 
    background: url(http://assets.nbn-studio.com/arrow-right-2.png) left top repeat; 
    height: inherit; 
} 
#right-content { 
    float: left; 
    background: url(http://assets.nbn-studio.com/arrow-right.png) repeat-y; 
    width: 150px; 
    height: 100%; 
} 
#footer { 
    background: #6C9; 
    height: 10%; 
    min-height: 50px; 
    width: 100%; 
    clear: both; 
} 

在這種方法中，我宣佈display: table爲#wrap-outer和display: table-cell，對於#side-left，#content和#side-right。我大概可以使用一些絕對定位的元素來實現類似的效果。

重要的是將#header,#wrap-outer和#footer的相對高度分別設置爲10％，80％和10％。實際情況是，如果窗口大小足夠小，您無法在垂直滾動條上看到％和px的高度單位。我的妥協方法是爲頁眉和頁腳設置一個min-height值，並設計任何圖稿以獲得一定的靈活性。如果垂直滾動出現在小屏幕上，則可以忍受。

此外，請注意使用height: inherit爲#side-left和#side-right。

使用多背景圖片

如果你正專注於新的瀏覽器支持CSS3，你可以通過在#wrap-outer使用多個圖像簡化的標記和#side-left和#left-content元素消除背景圖像一起（類似對於右側）。

表細胞

使用的table-cell屬性沒有在IE6/7支持，這可能是一些用戶的問題。

修復了IE7

我想出了一個替代佈局不使用table-cell。

您可以查看：http://jsfiddle.net/audetwebdesign/c7vTL/

我使用position: absolute位於側板。

我做了一些修改，讓這個版本的工作：

1. 中央背景圖像被固定在包裝，而不是內容元素。這需要爲側欄設置背景顏色（白色）。

2. 隱藏了包裝上的溢出。

Answer 2

林不完全知道是什麼的問題。然而，這可能是能夠幫助你：

HTML/CSS, getting 2 backgrounds in each side to adjust with the wrapper