解決了上一篇的高度不能自動延伸的問題之後，馬上會遇到另一個問題。#container 和 #content 延伸了，旁邊兩個區塊卻仍然維持原本的高度，如果要指定背景就很麻煩了。
解決方法：
加入以下 CSS：
#container {
overflow: hidden;
}
#left, #right {
padding-bottom: 1000px;
margin-bottom: -1000px;
}
利用 padding-bottom 設一個足夠容納所有內容的值
再用 margin-bottom 設相同的負值，將版面拉回來
這樣超過的版面就會被 overflow: hidden 隱藏，達到我們想要的效果。
最近製作網頁開始試著用純 CSS 來排版了，習慣之後發現真的比表格排版更方便，不過當中也會遇到一些問題，其中一個就是這篇要講的。
現在有個三欄式版面，如圖：
#container {
margin:0 auto;
width: 780px;
height: 100px;
background: #ffc;
border: 1px solid #000;
}
#left {
float: left;
width: 260px;
background: #9cf;
}
#content {
float: left;
width: 260px;;
background: #fcf;
}
#right {
float: right;
width: 260px;
background: #9cf;
}
原本預期當任何區塊內容過多時，外層 container 要能夠自動延伸，包住裡面的子區塊，但實做之後會發現變成這樣：
解決方法：
#container 裡不要指定高度，也就是維持預設的 height:auto; 同時加入 overflow: hidden; 即可。
#container {
margin:0 auto;
width: 780px;
background: #ffc;
border: 1px solid #000;
overflow: hidden;
}
記得不能指定高度，否則溢出的內容會被隱藏。
解決這個問題之後通常會遇到下一個問題...
寫網頁程式經常會遇到版面被撐開的情形，例如有人輸入一長串的網址，或是沒有空格的英文+數字，這些都會造成瀏覽器無法自動斷行導致版面被撐開，而解決方法除了用程式強制斷行之外，IE 中可以用 word-break:break-all 的 CSS 來解決，但是比較好的方式可以參考 jon 所寫的這篇，利用 wbr tag 來處理‧
最近很容易可以看到這個效果，也就是當您點選網頁中的圖片或連結時，背景會立即變暗並且出現 Loading... 然後跳出一個美美的方框顯示圖片或網頁，這種效果就叫做 Lightbox，底下收集了一些許多人開發或修改的 Lightbox，通常都會有 Demo，看個人喜好選擇囉。
‧Lightbox JS
典型也是最常見的一個，目前也出了 2.0 版，不過似乎只能顯示圖片而已。
‧ThickBox
這個也是很常見，可以顯示圖片、網頁，並且可指定方框的大小，推薦。
‧Greased Lightbox
提供裝在瀏覽器的擴充套件，平常看圖片時就會有 Lightbox 效果。
．GreyBox
這個就厲害了，除了可以用於圖片和網頁外、連 flash、影片都可以顯示在 Lightbox 彈出的方框裡面。
‧Lightbox Gone Wild!
也是可以顯示網頁、圖片，效果還不錯。
‧Lightbox plus
增加圖片縮放功能，對於圖片尺寸大於螢幕解析度時可以點選放大的圖示，觀看圖片完整尺寸。(由 RB 補充)
‧Lightbox Jojo
在顯示圖片前可以先瀏覽一張圖片，圖片開啟後可以在圖片的上個圖層再放一張圖片。(由 RB 補充)
近期迴響