將100％寬度的div放置在固定寬度的浮動底部

Question

我知道每天都會問這種問題，但是我似乎沒有找到解決這個問題的方法...

因此，這個想法非常簡單，我想創建一個3列固定寬度的布局，其中頁眉和頁腳的寬度為100％。

除了頁腳，一切似乎都可以正常工作。

這是一個示例： http : //jsfiddle.net/xMQLy/1/

因此，實質上的問題似乎在於，由於主體+橫向柱的高度不固定，因此頁腳未位於其底部。

我該如何解決？

謝謝

Answer 1

對CSS屬性使用absolute或fixed position從父級上下文中剝離元素。 因此，父級的寬度/高度將不受此孩子的尺寸的影響。 float屬性也具有以下效果：無法使用position:absolute/fixed或float有效地設置樣式。

我已經舍棄了這些屬性，並修改了您的代碼：@ Fiddle ： http : //jsfiddle.net/xMQLy/5/

一些變化：

• 丟棄無用的CSS屬性：
  .wrapper{position:relative;top:0}
`.leftcol and .rightcol {floar:right/left}
• 將常見樣式（ .leftcol, .main, .rightcol ）分組在一起。
• 更新了HTML源代碼，在源代碼中的每個div周圍添加了<div class="wrapper-align">包裝器，並刪除了這些包裝器之間的空格^[1]

^[1]
.leftcol, .main, .rightcol元素可以在每個div上應用display:inline-block .leftcol, .main, .rightcol 。 但是，這些元素的默認對齊方式是底部。 由於列必須位於頂部，因此必須使用vertical-align:top 。 此CSS屬性只能在內聯元素上使用 。 要實現此布局而不會弄亂float或display:absolute/fixed ，則需要在display-block元素周圍使用inline包裝器。

必須刪除空格，以防止在元素之間產生間隙。 為了進行說明，請比較以下頁面： 無空白與空白 。