Re: [問題] 父div的高度只包含了一個子div

看板Web_Design作者 (某T)時間14年前 (2009/12/22 14:44), 編輯推噓8(8017)
留言25則, 4人參與, 最新討論串3/3 (看更多)
整個重點就在一個地方,就是最外面容器的高度。 以IE7以前版本來說,height是會自動視需求加高的, 但在其他合乎規範的瀏覽器來說, 高度是會依照所下的值固定,必須用auto高度才可以自動增加。 height: auto; 這樣的話IE6以外的瀏覽器應該就是正常的。 而我們常常遇到的情況是,容器會希望有最小高度, 等到高度不夠自動增加,所以就再加上min-height: height: auto; min-height: 300px; 這時候又會遇到一個問題是,IE6並不支援min-height,IE6的height就等同於min-height, 所以如果要讓IE7、FF、IE6看起來都正確的話, 這邊可以在最外面容器的部份使用!important來處理: height: auto !important; // 這是給IE6以外的瀏覽器看的 height: 300px; // 這是給IE6看的, IE6的height同時也等於min-height min-height: 300px; // 設定其他瀏覽器顯示時的最小高度 所以整個文件大致如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.\ org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="" rel="nofollow">http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <style type="text/css"> <!-- #A { width: 500px; padding: 20px; background-color: #999; height: auto !important; height: 300px; min-height: 300px; } #B { background-color: #666; height: 100px; } #C { background-color: #000; height: 500px; } --> </style> </head> <body> <div id="A"> <div id="B"> </div> <div id="C"> </div> </div> </body> </html> 我個人是都這樣處理,提供給你參考。 -- 某T:我喜歡妳>/////< :You gotta try harder...╮(╯_╰)╭ 某T:啥?試著硬一點>///<(羞) :是叫你再努力一點啦<(# ̄皿 ̄)╮☆(__ __||) -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 59.124.63.2 ※ 編輯: terrylchen 來自: 59.124.63.2 (12/22 14:45)

12/22 14:52, , 1F
預設值就是auto了吧 從來沒有遇到要另外加的狀況
12/22 14:52, 1F

12/22 15:46, , 2F
謝謝你!!
12/22 15:46, 2F

12/22 20:43, , 3F
設float就好了不是嗎? 會隨著內容自動延伸高度
12/22 20:43, 3F

12/22 23:12, , 4F
float應該跟自動延伸高度無關吧...
12/22 23:12, 4F

12/22 23:26, , 5F
正確來說是什麼都不用設就會自動延伸高度..
12/22 23:26, 5F

12/23 00:52, , 6F
因為原po會有那樣的問題應該是#C 設了float 如果是做2~3欄
12/23 00:52, 6F

12/23 00:53, , 7F
排版 常會遇到這種問題 外框容器要設float才會自動延伸
12/23 00:53, 7F

12/23 00:54, , 8F
記憶中設float 會影響到clear 跟區塊屬性 所以會有這種情況
12/23 00:54, 8F

12/23 00:57, , 9F
以你的寫法來說 #C如果設float #A設auto也是沒用 他還是只
12/23 00:57, 9F

12/23 00:58, , 10F
延伸了#B的高度 因為#B沒有設float 區塊會clear:both
12/23 00:58, 10F

12/23 00:59, , 11F
#A才會延伸了#B的高度 同樣的#B如果設float #A也不會延伸
12/23 00:59, 11F

12/23 00:59, , 12F
#B的高度 好像很複雜 XD
12/23 00:59, 12F

12/23 01:01, , 13F
寫久了就會了解float的邏輯跟奧妙 XD (跟自動延伸是有關的)
12/23 01:01, 13F

12/23 01:11, , 14F
剛試了一下 #A設overflow: auto 也是OK的
12/23 01:11, 14F

12/23 01:34, , 15F
overflow: auto 在IE6失效! (不然怎麼會有clearfix)
12/23 01:34, 15F

12/23 02:04, , 16F
所以float:left最好用啊 (IE6去死啦!!)
12/23 02:04, 16F
※ 編輯: terrylchen 來自: 59.115.162.241 (12/23 02:20)

12/23 02:28, , 17F
原po的情況應該是最外面容器設定了高度的關係吧...
12/23 02:28, 17F

12/23 02:29, , 18F
display為block的元素本來就是上下堆疊的,沒有需要加
12/23 02:29, 18F

12/23 02:29, , 19F
float吧?
12/23 02:29, 19F

12/23 02:32, , 20F
原因太多了 他不貼css上來幹嘛瞎猜
12/23 02:32, 20F

12/23 02:34, , 21F
好像也是啦=..=
12/23 02:34, 21F

12/23 04:53, , 22F
原po說他只有#B設高度啊 相反吧 不要上下堆疊才設float
12/23 04:53, 22F

12/23 11:25, , 23F
所以不用加float啊=..=...
12/23 11:25, 23F

12/23 15:13, , 24F
原po如果沒有設float 就不會有那個問題啊 總之原po提供的
12/23 15:13, 24F

12/23 15:14, , 25F
資訊不夠多... 但float沒辦法clear的例子是很經典&常見的
12/23 15:14, 25F
文章代碼(AID): #1BC6hXXq (Web_Design)
文章代碼(AID): #1BC6hXXq (Web_Design)