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

五月 7th, 2007
4,695 views Goto comments Leave a comment

最近製作網頁開始試著用純 CSS 來排版了，習慣之後發現真的比表格排版更方便，不過當中也會遇到一些問題，其中一個就是這篇要講的。
現在有個三欄式版面，如圖：

01.png


#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 要能夠自動延伸，包住裡面的子區塊，但實做之後會發現變成這樣：
02.png
解決方法：
#container 裡不要指定高度，也就是維持預設的 height:auto; 同時加入 overflow: hidden; 即可。


#container {
	margin:0 auto;
	width: 780px;
	background: #ffc;
	border: 1px solid #000;
    overflow: hidden;
}

記得不能指定高度，否則溢出的內容會被隱藏。

解決這個問題之後通常會遇到下一個問題...

網頁設計 , , ,

  1. 觴
    一月 27th, 2008 at 13:30 | #1
    Reply | Quote

    謝謝這篇指導，最近為了讓網頁製作達到SEO的標準，也在學用CSS排版，蠻有趣的！
    你現在說的問題，我正苦無解決辦法！用IE瀏覽是不會有問題，背景會隨著內容高度自動延伸，以Firefox觀看就會有問題了…

  2. 九命
    五月 1st, 2009 at 10:53 | #2
    Reply | Quote

    你好，我試著依照你的教學操作，不過#container 的部分卻只延伸到#left、#right的底部，#content較長的部分都被隱蔽了……
    不知道有沒有辦法改善？

    • lym520
      五月 2nd, 2009 at 12:36 | #3
      Reply | Quote

      @九命
      我試的結果應該是會自動延展到最大的區塊高度，在 IE 8 測試也是如此哦！
      如果不行可以將網頁貼出來一起研究看看。

  3. 聽。風
    五月 1st, 2009 at 19:07 | #4
    Reply | Quote

    請問站長有沒有辦法利用css控制文章裡圖片的最大尺吋?

    還有站長您的部落格是用啥架的?

    • lym520
      五月 2nd, 2009 at 12:37 | #5
      Reply | Quote

      @聽。風
      我沒試過呢！但是問 Google 大神的結果應該是可以的。
      部落格是用 Wordpress 架的。

  4. 九命
    五月 4th, 2009 at 11:07 | #6
    Reply | Quote

    我終於發現差異性了，我中間的區塊不是浮動區塊……
    如果不將中間的區塊改成浮動，就沒辦法了嗎？

  5. 聽。風
    五月 5th, 2009 at 19:59 | #7
    Reply | Quote

    這個空間是免費的還是付費的ㄚ?
    我正再要架一個部落格(因為無名太爛)
    可是找不到好用的空間
    可以推薦一下嗎?
    還有WP要去哪下載?
    我只找到中文語系檔ˋ

  6. lym520
    五月 9th, 2009 at 20:56 | #8
    Reply | Quote

    @聽。風
    這個是付費的虛擬主機空間，免費空間我很久沒注意囉！幫不上忙。
    WP 需下載原始程式加上中文語系，可在 WP台灣中文站 找到。

  7. 聽。風
    五月 10th, 2009 at 22:00 | #9
    Reply | Quote

    謝謝大大
    部落格我架成功了歡迎來看看
    還有想請問有沒有外掛可以設定說顯示在文章裡的圖片不會超過套定大小
    然後按一下以後就會顯示放大版的圖這樣?
    另外我想請問為何我的側邊欄會沉下來?要怎麼調?

  8. lym520
    五月 12th, 2009 at 10:35 | #10
    Reply | Quote

    @聽。風
    WP 的後台設定應該就有限制圖片大小的功能唷！
    sidebar 會掉下去通常是所有 box 的寬度總和超過外框大小，請縮小寬度試試。

  9. 聽。風
    五月 12th, 2009 at 18:24 | #11
    Reply | Quote

    謝謝大大
    另外我想請問有沒有外掛可以設定說顯示在文章裡的圖片不會超過套定大小
    然後按一下以後就會顯示放大版的圖這樣?

  10. Eddie
    六月 25th, 2010 at 12:44 | #12
    Reply | Quote

    盈名您好，
    我目前遇到一個大問題，是看了你的這篇文章後，獲得解決，
    那種心情，真的是感動到無法形容！真是太感謝你了!!
    另外冒昧想請問另一個我遇到很奇怪的問題，我研究了很久，但一直找不到解決方法囧
    麻煩您看這個連結：http://design14.allmarketing.com.tw/aqua2use/contactus.html
    其他頁面都正常，唯獨這個頁面，在IE6看的時候，下半部會空出這麼一大片白色的部分。
    我有發現，如果我把左邊的那個長條banner拿掉，就正常。
    但是照理說不可能會這樣啊!?
    那個banner根本沒那麼長，怎麼可能下面還空出一大片白色部分。
    想勞煩您抽個空，幫我看看，真的很感謝您!!>0<

  1. No trackbacks yet.