有時候，我們用css建立乙個高度自適應布局，如何保證頁尾（footer）在內容不超過一屏的情況下始終保持在布局最下方是乙個比較頭疼的事。我看過一些利用絕對定位的例子，但總感覺不是那麼完美，經過一下午的研究總結出乙個利用負值外補丁的方法來實現這個效果的方法，相容ie5.0 ，opera 8.5 ，firefox 1.5 。下面我們看步驟：
1、為了讓瀏覽器識別高度100%我們需要先給 html 和 body 加上乙個高度值，同時清除所有元素的 margin 和 padding。順便提一下，經過我的測試，html 和 body 的 height: 100%; 等於整個瀏覽器視窗的總高度，無論內容是否超過一屏。而它們下一級子元素 height: 100%; 則等於第一屏的高度。如何，是不是有點不好理解？
*html, body
2、因為上面提到的問題，所以為了讓布局自適應高度，我們要加上 min-height: 100%;，雖然ie不支援這個屬性但是ie的 height: 100%; 有同樣的作用：
min-height: 100%;
}height: 100%;
}這樣，乙個最簡單的
最小高度滿一屏的自適應布局就做好了。為了便於檢視，我加了一些寬度和背景色修飾，如下：
*html, body
width: 770px;
min-height: 100%;
background: #ccc;
margin: auto;
text-align: left;
}height: 100%;
}
background: green;
height: 40px;
}#sidebar
#content-box
#footer
4、為了讓 footer 能夠剛好在最下方，我們可以給 footer 加乙個等於自身高度的上方的負邊距強制把它向上推乙個自身的高度，即 margin-top: -50px; 。但是這樣的話當內容超過一屏我們會看到內容會蓋在 footer 的上方，顯然這是失敗的。所以我們還要給 content-box 和 sidebar 加乙個父級元素，設定它的下方內補丁等於 footer 的高度，強制把 content-box 和 sidebar 向上推乙個 footer 的高度。同時，因為 content-box 和 sidebar 是浮動元素，所以我們還要讓它 閉合浮動元素 。 這樣就比較完美了。
#out-content#out-content:after
* html #out-content
#footer
5、舉一反三，利用上面的原理我們還可以做乙個一邊固定寬度一邊自適應寬度的液態彈性布局，修改一些寬度然後給 #content-box 下面再套一層就可以實現了。
其他問題，如果有人希望中間兩欄高度相同的話可以使用欺騙法，見建立各欄同高的多欄布局。
ok，經過以上方法，這個布局應該是比較完美了。
css 設定body的最小高度是100 ，滿屏顯示
解決問題 1.body裡的內容不滿一屏時，body的高度滿屏 2.當內容超出螢幕高度時，內容的高度就是body的高度。方法一 沒有設定body的高度，內容不滿屏，但是背景色卻鋪滿整個螢幕，方法如下 html html不設定背景色 body 注 可是為什麼我們在寫專案的時候，卻並沒有達到這個效果，而是...
關於div高度 寬度 100
正像你所知道的那樣，設定div大小的有兩個屬性width和height，以前在學習div每次給div設定100 寬度或高度時都很迷惑，不明確這個100 的寬度 高度 到底有多寬有多高？這個100 是從 得到的從 繼承的？今天我們的話題就是有關div高度100 的問題！其實，要弄懂div寬度 widt...
css高度100 百分比高度
css的height屬性可以設定100 但是必須能得到父元素的高度。否則無效。例如 aa bb cc 此時百分比起效，效果如下 如果無法得到父元素的高度，則百分比失效。例如 aa bb cc 效果如下 如果body下的div想要實現高度100 效果，也需要設定父元素的高度，就是html和body了。...