如果我們想在3列布局的最後加一行頁尾，放版權之類的資訊。就遇到必須對齊3列底部的問題。在table布局中，我們用大**巢狀小**的方法，可以很方便對齊三列；而用div布局
，三列獨立分散，內容高低不同，就很難對齊。其實我們完全可以巢狀div，把三列放進乙個div中，就做到了底部對齊。下面是實現例子(白色背景框模擬乙個頁面)：
body 這裡是#header這裡是#mainbox 包含了#menu,#sidebar和#content 這裡是#menu這裡是#sidebar，背景顏色用的是#main的背景色
這裡是#content
這裡是主要內容，根據內容自動適應高度
這裡是主要內容，根據內容自動適應高度
這裡是主要內容，根據內容自動適應高度
這裡是#footer。
這個例子的頁面主要**如下：
具體樣式表都寫在相應版塊裡了。重點在於#mainbox層巢狀了#menu,#sidebar和#content三個層。當#content的內容增加，#content的高度就會增高，同時#mainbox的高度也會撐開，#footer層就自動下移。這樣就實現了高度的自適應。
另外值得注意的是：#menu和#content都是浮動在頁面右面"float: right;",#sidebar是浮動在#menu層的左面"float: left;"，這是浮動法定位，還可以採用絕對定位來實現這樣的效果。
這個方法存在另乙個問題，就是側列#sidebar的背景無法百分之百。一般的解決辦法就是用body的背景色來填充滿。(不能使用#mainbox的背景色，因為在mozilla等瀏覽器中#mainbox的背景色失效。)
好了，主要的框架已經搭建完畢,剩下的工作只是往裡面添磚加瓦。如果你希望嘗試其他布局，推薦
高度自適應
開發中遇到乙個問題，要求不管在多高的螢幕下，什麼都行 到底部的距離都應該和psd一致，flash裡面的問題 定義寬度 var psdwidth 750 定義高度 var psdheight 1448 獲取手機螢幕寬度 var w window.innerwidth document.document...
高度自適應
1.高度不去設定，或者高度設定auto 內容撐開父元素的高度。2.內容撐開父元素的高度 最小高度的設定 min height 3.浮動元素新增高度自適應 新增浮動元素的父元素沒有高度，會出現高度塌陷 1 給出現高度塌陷的元素新增 overflow hidden 原理 overflow hidden ...
iframe 自適應高度
由於html沒有include或require，做網頁時我們會用iframe來達到包含頁面的目的。如果呼叫的iframe頁面高度會根據內容多少而發生變化，這時通常要保持iframe與內容頁面的高度，以避免出現iframe的滾動條。先搜尋了一下，有不少好的例子，但總覺得說的還不夠明了。下面給出詳細例子...