CSS Làm việc trong Chrome nhưng không phải Firefox (div chiều cao)

Question

tôi đã và đang xây dựng một trang web và chủ yếu là thử nghiệm nó trong Chrome. Gần đây tôi nhận ra một số CSS không áp dụng trong Firefox.

Tôi đoán nó có thể là: chính {min-height}

jFiddle này tái tạo lỗi này, nơi div chính không có chiều cao đó là nghĩa vụ. 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; 
} 

Tuy nhiên, trong tất cả mọi thứ hoạt động hoàn hảo Chrome và div chính có một min-height là 80%. Tôi đã tự hỏi nếu có một workaround này hoặc Nếu tôi làm điều gì đó sai trái.

Cảm ơn bạn.

Answer 1

Bạn đã cố gắng làm cho cơ thể và html 100%?
Trong một số trình duyệt, phần tử nội dung không giữ được độ cao 100% cho đến khi nội dung đầy.

http://jsfiddle.net/HRKRN/

html, body { 
    height: 100%; 
} 

Answer 2

sử dụng CSS3 để giải quyết vấn đề này

http://pastebin.com/Q8727Kvt 

Align vertically using CSS 3

Answer 3

Cũng là một giải pháp khả thi mà làm việc cho tôi: thiết lập hiển thị của div để table-cell.