五月7
[CSS] 重直多欄式版面自動延伸高度
最近製作網頁開始試著用純 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;
}
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;
}
margin:0 auto;
width: 780px;
background: #ffc;
border: 1px solid #000;
overflow: hidden;
}
記得不能指定高度，否則溢出的內容會被隱藏。
解決這個問題之後通常會遇到下一個問題…
Trackback:
謝謝這篇指導，最近為了讓網頁製作達到SEO的標準，也在學用CSS排版，蠻有趣的！
你現在說的問題，我正苦無解決辦法！用IE瀏覽是不會有問題，背景會隨著內容高度自動延伸，以Firefox觀看就會有問題了…