CSS min-height không hoạt động đúng

Question

Đây là tình hình, tôi có html này:

<div id='main'> 
    <div id='menu'> 
     Menu Items Here 
    </div> 
    <div id='cont'> 
     Content Here 
     <div id='footer'>Some Footer</div> 
    </div> 
</div> 

CSS ở đây:

html, body { 
    height: 100%; 
    width : 100%; 
    margin: 0; 
    padding: 0; 
} 

#main{ 
    overflow : auto; 
    background-color: yellow; 
    width : 100%; 
    min-height : 100%; 
} 

#menu { 
    background-color: red; 
    float : left; 
    width : 300px; 
} 

#cont { 
    margin-left : 300px; 
    float : right; 
    background-color: orange; 
    width : 100px; 
    min-height : 100%; 
    height: auto !important; /*min-height hack*/ 
    height: 100%;   /*min-height hack*/ 
} 

Những gì tôi muốn làm về cơ bản là #cont div phải có một chiều cao tối thiểu 100% (nếu tôi có nội dung nhỏ) nhưng sẽ mở rộng nếu có nội dung dài hơn.

Mọi trợ giúp sẽ được đánh giá cao.

Lưu ý: Kích thước chiều rộng chỉ là tạm thời.

Cảm ơn!

Answer 1

này có thể làm việc:

#main{ 
    height : 100%; 
} 
#cont { 
    min-height : 100%; 
    /* Without the hacks */ 
} 

Answer 2

bạn đang sử dụng min-height: 100% có nghĩa là 'làm cho chiều cao tối thiểu của hộp này là chiều cao của nó

bạn sẽ tốt hơn sử dụng một giá trị pixel (ví dụ, hãy #menu và #cont min-height: 400px;)

nếu bạn muốn làm cho họ cả chiều cao của nhà cao nhất một, sau đó bạn sẽ cần một số jquery:

if (jQuery('#menu').height() < jQuery('#cont').height()) { 
    // the cont is bigger than the menu 
    jQuery('#menu').css("height", jQuery('#cont').height()); 
} 

Answer 3

Hãy thử điều này http://jsfiddle.net/W6tvW/2/

<div id='main'> 
    <div id='menu'> 
     Menu Items Here 
    </div> 
    <div id='cont'> 
     Content Here 
     <div id='footer'>Some Footer</div> 
    </div> 
</div> 

html, body { 
    height: 100%; 
    width : 100%; 
    margin: 0; 
    padding: 0; 
} 

#main{ 
    overflow : auto; 
    background-color: yellow; 
    min-height : 100%; 
    position: relative; 
} 

#menu { 
    background-color: red; 
    float : left; 
    width : 300px; 
} 

#cont { 
    margin-left : 300px; 
    background-color: orange; 
    min-height : 100%; 
    position: absolute; 
    right: 0; 
} 

Nếu bạn muốn chân ở lại ở phía dưới:

#footer { 
    position: absolute; 
    bottom: 0; 
}