兩列高度未知的情況下，css + div兩列高度自適應(yīng)  

2011-07-30 12:04:49

高度自適應(yīng)一直是一個困擾著csser的問題 今天在這里向各位介紹一個較為簡單的解決高度自適應(yīng)的方法

我們以兩列情況的布局為例 如下圖：

我要的布局效果是 不管左側(cè)和右側(cè)哪個內(nèi)容多 哪個高度高 都以高的為準(zhǔn)
在網(wǎng)上找了一些相關(guān)資料 解決辦法比較多 但個人覺得還是用負(fù)外邊界和內(nèi)補(bǔ)丁相結(jié)合的辦法來解決最簡單也最為實用

說一下具體的做法：

①兩列div最外面設(shè)置一個box 并設(shè)置超出部分隱藏 overflow:hidden 并設(shè)置寬度width（這個寬度的具體值視左右兩列的寬度而定）

②left和right這兩個div都設(shè)置margin-bottom:-9999px;padding-bottom:9999px;

基本上做到以上兩點(diǎn) 我們的問題就可以很漂亮的搞定了

一切盡在我們掌握中 看起來很完美 是嗎？

事情并非我們所想象 網(wǎng)上的很多實例 都是針對兩列均為背景色而言 并沒有像我上圖那樣左側(cè)一列div有邊框

因為在實際工作布局所需效果中 我們往往需要給左列的div加個邊框啊什么的

那好啊 要邊框的話 我們就加border好了 這不是so easy嗎？恩 是的 起初 我也很你是一樣的想法

但當(dāng)我真正把border加上去后 問題出現(xiàn)了 左列的div只有左上右三個邊框 沒有底邊框 咦？這是怎么回事呢？我想 問題的原因應(yīng)該是margin-bottom:-9999px;padding-bottom:9999px;這個造成的 我不想多加追究了···我很忙 我要搞定這個問題···

我曾經(jīng)試過很多種辦法 我想既然左列的div設(shè)置了margin-bottom:-9999px;padding-bottom:9999px; 導(dǎo)致底邊框不能顯示 那我就在左列div里再加一個div 再對這個div設(shè)置border不就行了嗎？恩 是的 我重寫CSS 預(yù)覽 咦 真的可以了也 我激動萬分 可遺憾的是 這個辦法只適應(yīng)左列的內(nèi)容比內(nèi)容多 也就是說只適應(yīng)左列的高度比右列的高度高 一旦內(nèi)容沒右列的高 內(nèi)容少于右列的內(nèi)容 那個底邊框就緊貼著內(nèi)容的下邊緣 并不是到底 那不得不對這個div也設(shè)置margin-bottom:-9999px;padding-bottom:9999px; 但這樣設(shè)置的話 又回到我們的老問題 底邊框不能顯示 我的功夫白費(fèi)了···咳····

既然這樣不行 那我們就換個思路 我用超級無敵的overflow來幫我搞定這個問題吧

我在最外面的box的后面加上了這句：
<div style=" width:132px; height:1px; background:#87C1FC; overflow:hidden; position:relative; top:-1px;"></div>

寬度是這個左列div的實際寬度 1像素的高度 背景顏色是這個div的背景顏色 超出部分隱藏 為什么要讓它相對定位 并且讓它居上-1px呢 因為這個div（實際上就是左列div的底邊框）是緊跟在最外面的box后面的 也就是說它會緊跟著那個高的div后面 這樣它總會高出1px 所以為了與其平齊 我就設(shè)置了top：-1px 盡管這是個小問題 我們還是要精益求精 呵呵···

至此 帶邊框的自適應(yīng)問題終于解決了