扩大父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

回答

相关问题