CSS Chrome'da çalışıyor ancak Firefox'ta değil (div yüksekliği)

Question

Web sitesi oluşturuyorum ve çoğunlukla Chrome'da test ediyorum. Son zamanlarda bazı CSS'nin Firefox'ta geçerli olmadığını fark ettim. Sanırım

bu durum büyük ihtimalle: Bu jFiddle ana div Olması gerektiği yüksekliğe sahip olmayan bu hatayı, yeniden üreten ana {min-height}

. http://jsfiddle.net/msW9m/

HTML:

<div id='main'></div> 
<div id="container"></div> 
<div id='footer'> 
    <div id='footerRelative'>Development by <a href='mailto:'>John Doe</a></div> 
</div>​ 

CSS:

#main { 
    min-height: 80%; 
    height: auto; 
    border: 1px solid #bbbbbb; 
    margin: 3% 5% 1%; 
    padding: 10px 10px; 
} 
#footer { 
    position: absolute; 
    left: 50%; 
} 
#footerRelative { 
    position: relative; 
    left: -50%; 
    font-size: 80%; 
} 
/*Probably Irrelevant*/ 
#container { 
    margin: 0 auto; 
    margin-top: -300px; 
    margin-left: -261px; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 523px; 
    height: 600px; 
    background-image: url('../images/doctorSymbol.jpg'); 
    background-repeat:no-repeat; 
    background-position:center; 
    opacity: 0.125; 
    overflow: hidden; 
    z-index: -1; 
} 

Ancak Chrome'da her şey mükemmel çalışıyor ve ana div% 80 dk-yüksekliğe sahiptir. Bunun bir geçici çözümü olup olmadığını veya yanlış bir şey yapsam mı diye merak ediyordum.

Teşekkür ederiz.

Answer 1

Vücut ve html% 100 yapmayı denediniz mi?
Bazı tarayıcılarda, gövde öğesi, içeriği doluncaya kadar% 100 yükseklik göstermez.

http://jsfiddle.net/HRKRN/

html, body { 
    height: 100%; 
} 

Answer 2

kullanım CSS3 bu konuyu da

http://pastebin.com/Q8727Kvt 

Align vertically using CSS 3

Answer 3

benim için çalıştı olası bir çözüm çözmek için: table-cell için div ekranı ayarlayın.