調整窗口大小調整頁眉和頁腳寬度

Question

我已經將自己編碼到了一個角落，或者我正在監視某處明顯的東西。我有一個是這樣設計的半流體CSS佈局：

頭 - 在所有時間100％的寬度，包含一個的x重複的背景圖像

容器 - 流體（960像素到1200像素，居中，包含兩個列）

註腳 - 在任何時候都100％的寬度，包含了X-重複背景圖像

在幾乎所有情況下能正常工作。

總之，設計作爲一個整體可以適應任何寬度，但內容部分最多隻能達到1200像素。但是，由於這涉及到照片網站，因此有時圖像比容器寬度爲1200px更寬，圖像突然出現。這非常好，我想要顯示完整的圖像。但是，我希望頁眉和頁腳可以縮放到最寬的元素，在這種情況下是圖像。這種情況並沒有發生，當我調整窗口的寬度小於圖像的寬度時，使用水平滾動條滾動到右側時，它並沒有發生，特別麻煩：它使頁眉和頁腳都留下了明顯的間隙，而我希望它們伸展到至少圖像/內容寬度。

只需將寬度設置爲100％是不夠的，因爲它涉及視口，而不是內容寬度。我可以強制使用最小寬度的頁眉和頁腳的大值，但在正常分辨率下留下水平滾動條。我可以使用overflow隱藏滾動條：隱藏，但是當內容很小時，會遮住內容並且不顯示滾動條。爲了長話短說，我想我想要的是，這種佈局可以像表格一樣工作：如果一列的內容比它的大小寬，它會將所有其他行的寬度推到相同的寬度。最大寬度決定總寬度。我更喜歡沒有JavaScript的解決方案，但是我認爲它不是可能的，或者我正在監督非常明顯的事情？

Answer 1

100％寬度將元素的寬度設置爲元素寬度的100％。就您的情況而言，它似乎是窗口本身（或body元素）。爲了使頁眉和頁腳div（我假設你在這裏使用div）與圖像一起縮放，它們可能需要被包括在圖像所在的同一個div中，或者在div的圖像div也在，假設div縮放到正確的寬度（不要認爲它縮放以適應圖像）。

但是，在許多情況下，使用表格進行佈局可能會更清晰，並且會處理您正在查找的水平縮放類型，而無需訴諸css hacks。

Answer 2

爲了使長話短說，我想 什麼，我想的是，這種佈局將 工作作爲表將工作

顯示：這些因素的共同的容器，並顯示在表：在其子項上的表格行或表格單元格。這在IE6中不起作用，但聰明的事情可以通過它的CSS表達式（）來模擬。

但是，我寧願建議您根本不要設置最大寬度，並根據用戶所需的窗口大小讓設計更好地流動。