擴大父div的高度，以適應浮動和unfloated兒科div

我有一個父分區#modal_share與定義的高度400px。我希望它能夠擴展它的高度，以便在最初隱藏的新子div變爲可見時包含其所有子div。擴大父div的高度，以適應浮動和unfloated兒科div

問題：現在，當一個隱藏的子div div .modal_error_msg變得可見時，這個新可見div下的一些div會被推到其父div之外。

我怎樣才能讓父div #modal_share擴大其高度，以包含所有可見的子div？

的jsfiddle：http://jsfiddle.net/TEmGc/

CSS

#modal_share { 
    width: 565px; 
    height: 400px; 
    position: relative; 
    background: whiteSmoke; 
    padding-top: 10px;  
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    -webkit-box-shadow: 0px 3px 16px #222; 
    -moz-box-shadow: 0px 3px 16px #222; 
    box-shadow: 0px 3px 16px #222; 
    display: none; 
} 

.modal_big_hline { 
    width: 100%; 
    height: 1px; 
    margin-top: 25px; 
    border-top: 1px solid #CCC; 
    float: left; 
} 

.modal_error_msg { 
    width: auto; 
    height: 15px; 
    padding: 15px 25px; 
    margin: 0px 25px; 
    font-size: 12px; 
    color: #B79000; 
    border: 1px solid #E7BD72; 
    background: #FFF3A3; 
    clear: both; 
    display: none; 
} 


#modal_big_button_container { 
    height: 14px; 
    width: auto; 
    margin: 10px 25px 0px 25px; 
    clear: both; 
}

HTML結構

<div id="#modal_share"> 
    <div class="modal_error_msg"></div> 
    <div class="modal_big_hline"></div> 
    <div id="modal_big_button_container"></div> 
</div>

來源

2012-01-31 Nyxynyx

對於父DIV #modal_share聲明height如auto那麼它會根據子元素自動調整高度。

來源

2012-01-31 03:37:54 Unknown

設置modal_share's高度爲auto：

#modal_share { 
    width: 565px; 
    height: auto; //<---- 
    position: relative; 
    background: whiteSmoke; 
    padding-top: 10px;   
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    -webkit-box-shadow: 0px 3px 16px #222; 
    -moz-box-shadow: 0px 3px 16px #222; 
    box-shadow: 0px 3px 16px #222; 
}

見Feedle http://jsfiddle.net/TEmGc/1/

來源

2012-01-31 03:39:32

擴大父div的高度，以適應浮動和unfloated兒科div

回答

相關問題