[CSS] 使多欄式版面高度等高

| No Comments

解決了上一篇的高度不能自動延伸的問題之後，馬上會遇到另一個問題。#container 和 #content 延伸了，旁邊兩個區塊卻仍然維持原本的高度，如果要指定背景就很麻煩了。

解決方法：
加入以下 CSS：
#container {    overflow: hidden;}#left, #right {    padding-bottom: 1000px;    margin-bottom: -1000px;}
利用 padding-bottom 設一個足夠容納所有內容的值
再用 margin-bottom 設相同的負值，將版面拉回來
這樣超過的版面就會被 overflow: hidden 隱藏，達到我們想要的效果。
參考文章

[CSS] 重直多欄式版面自動延伸高度

| Comment(1)

最近製作網頁開始試著用純 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 [...]