五月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觀看就會有問題了…