Question

我有一个父级div #modal_share，其定义高度为400px。当一个最初隐藏的新子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>

Answer 1

对于父div #modal_share，将height声明为auto，然后它会根据子元素自动调整高度。

Answer 2

将modal_share's高度设置为自动：

#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/

扩展父div的高度以适应浮动和放大不受欢迎的孩子

2 个答案: