[問題] 讓DIV的高度在firefox中自動延伸

[oj113068 (橘子汁)]

請問一下，
我設置了一個DIV的區塊包了背景，
原本設置了高度，但是發現有其他頁面內容超出
而且長短不依，所以希望它可以自動延伸。
在IE，用height:auto;就會自動延伸了，
但是在火狐中卻不行，設auto的話他整個都不見了= ="(有點奇怪，但是這個
Div裡面是有包內容的)

所以想來請問是哪裡出問題，或是用什方法讓height在火狐裡面也可以自動延伸

以下是原本的CSS：

#brg{/*中間主要區段背景兩側陰影*/
        width:839px;
        height:743px;
        *height:auto;
        text-align:center;
        margin:auto;
        background-image:url(images/shadow_main.png);
        padding:0px;
        }


--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 211.21.159.184
推 s25g5d4:這東西 前幾篇不是剛好再講嗎...
→ s25g5d4:找一下之前的"div的長度"討論串 應該有你要的東西
→ ateclean:會不會是#brg裡的東西有float ?
→ rocky823:高度寫死成743px 當然不會延伸
→ oj113068:@ @我有用DIV和火狐爬文，沒爬到...漏掉了？等等去找
→ oj113068:4F，我的意思是，height:743px;這一行要怎麼修改或是其他
→ oj113068:方法這類的。因為修改成auto沒有用...
→ oj113068:@ @我看到一樓說的那篇了，當時看了開頭的覺得他在問的和
→ oj113068:我在找的不太一樣Orz 我去看一下
→ oj113068:#brg裡面的有float，因為要靠左Orz 我還沒試過拿掉，
→ oj113068:不過拿掉我也會有點不知道怎麼改就是了~|||研究一下
推 rocky823:那把#brg 加上 overflow:auto 就好了
→ oj113068:R大，沒有用耶Orz。我現在在試display:table; 可是他在A
→ oj113068:網頁有效，B網頁卻無效。
→ oj113068:兩個網頁的DIV內包不同的東西，我正在研究到底是什麼東西
→ oj113068:影響的Q_Q
推 aceone:試試看加上min-height & max-height (<-這個設大一點)
#brg裡面，我主要是包了.main和.banner(還有其他，先砍除一個一個測試)

原本的高度743是以首頁的內容定的，之後沒想到其他頁面竟然會長短差距那麼大，
但仍希望他們可以共用，所以才想要讓他自動延伸。
目前的問題是，display:table和heght:100%的做法可以成立，但原本用
position數質的似乎都要修改，不然#brg似乎不覺得那些東西包在他裡面
(這個說法好奇怪，不過找不到更好的形容了)，背景沒延伸，看起來很像一個區塊
疊直接在背景上(大概像APDIV的感覺)。

對CSS一知半解所以用試誤的...(淚)

現在是這樣修改

原本的-------------------------------------------------

#brg{/*背景兩側的陰影*/
        width:839px;
        height:743px;
        *height:auto;
        text-align:center;
        margin:auto;
        background-image:url(images/shadow_main.png);
        padding:0px;
        }

#main2{/*中間主要區段*/
        width:825px;
        height:743px;
        *height:auto;
        text-align:center;
        background:#FFF;
        top:87px;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
        }

.banner{
        height: auto;
        width:814px;
        background-color:#039;
        position:absolute;/*FF 根據父層DIV 定位判斷top位置*/
        margin:5px;
        *position:relative;/*IE7 根據文件原基準判斷位置*/
}


現在------------------------------------------------------------

#brg{/*背景兩側的陰影*/
        width:839px;
        *height:auto;
        text-align:center;
        margin:auto;
        background-image:url(images/shadow_main.png);
        padding:0px;
        display:table;
        }

#main2{/*中間主要區段*/
        width:825px;
        height:100%;
        *height:auto;
        text-align:center;
        background:#FFF;
        top:87px;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
        }

.banner{
        height: auto;
        width:814px;
        background-color:#039;
        float: inherit;
        padding:5px 7px 5px 7px;
}

接下來還要把原本的欄位一個一個放回去看會不會有什麼問題Orz
aceone大建議的兩個數值我上網找了一下還式看不太懂用法~|||所以先擱著

新手上路如果有什麼很爆笑的地方請儘管笑(欸？)


※ 編輯: oj113068        來自: 61.59.19.62          (09/18 00:31)
推 aceone:你這問題我好像也遇過 記得是沒有float的div 設margin就不
→ aceone:會有自適高度 那時是用min/max-height去做(再針對IE6寫高度
→ aceone:後來習慣多一個div包在外面 設margin 裡面再設float的做法
→ aceone:裡面兩個div多下面加一個div下屬性clear:both 記得也可以
今天繼續奮鬥Orz
clear:both的用法我上網找了一下，正在研究中T_T
不過目前我把中間包的不需要靠左的float先去除

那個，再請問什麼叫做自適高度？


※ 編輯: oj113068        來自: 203.73.175.192       (09/18 21:16)
→ superpai:你可能要講清楚你所謂的自動延伸是什麼
→ superpai:因為本來height什麼都不設就是高度隨裡面的內容延伸了
也沒什麼，就是會隨內容物自動延伸Orz
目前看起來應該是float的關係，float刪除以後#brd就隨內容撐開了
所以我先把內容按照垂直順序做橫向的DIV，需要用float的再全部包進最裡面

※ 編輯: oj113068        來自: 203.73.175.192       (09/18 21:57)
→ aceone:                     自適高度 ^^^^^^^^^^^^^^^^^^^^
→ superpai:你是指div不會包住它裡面有float的東西嗎？
→ superpai:是的話這是正確的表現 有需要相關文章的話再給你連結
對，以前看CSS的書有看過他說float會「脫離版面」，有點不懂
現在有點懂了XD"
不過之前嘗試的時候把float:left改成float:inherit也可以讓他被父層的DIV撐開
如果方便的話請給我連結~Q口Q 謝謝

※ 編輯: oj113068        來自: 203.73.175.192       (09/18 22:13)
※ 編輯: oj113068        來自: 203.73.175.192       (09/18 22:14)
→ superpai:http://www.positioniseverything.net/easyclearing.html
→ superpai:然後想簡單簡單解決的話把外層那個div設overflow:hidden
→ superpai:就會撐開了