Javascript 在Ajax调用后更改Div的高度

问题: 我有一个动态表单，它使用JQuery步骤使其成为向导。现在，有一个步骤，下拉框选择触发AJAX调用，然后将表单字段添加到表单中。我需要这个字段所在的div的高度根据添加的字段数量变长

图像： 该表单以两个下拉列表开始： 一旦为第二个下拉列表选择了某个内容，就会进行AJAX调用，表单会附加字段。

灰色框应调整大小以容纳附加字段

代码： div的CSS如下所示：

.wizard > .content
{
    background: #eee;
    display: table-cell;
    margin: 0.5em;
    min-height: 35em;
    position: relative;
    width: auto;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

 <div class="container-fluid">
<?php if ($this->error) : ?>
<div class="row-fluid">
    <?php echo $this->error; ?>
</div>
<?php else : ?>
<?php echo $this->form()->openTag($form); ?>

<h3>Details</h3>
<section>
    <?php echo FormElementFactory::create($this, ProjectForm::KEY_PROJECT_NAME, false, true); ?>
    <?php echo FormElementFactory::create($this, ProjectForm::KEY_PROJECT_DUE_DTTM, !($this->uberAdmin)); ?>
    <?php echo FormElementFactory::create($this, ProjectForm::KEY_PROJECT_DESCRIPTION); ?>
</section>
<h3>Options</h3>
<section>
    <?php echo FormElementFactory::create($this, ProjectForm::KEY_REVIEW_PROJECT); ?>
    <?php echo FormElementFactory::create($this, ProjectForm::KEY_WTL_PROJECT); ?>
    <?php echo FormElementFactory::create($this, ProjectForm::KEY_JOB_TABLE); ?>
</section>
<h3>Project Configuration</h3>
<section>
    <?php echo FormElementFactory::create($this, ProjectForm::KEY_PROJECT_TYPES, !($this->uberAdmin), true); ?>
    <?php echo FormElementFactory::create($this, ProjectForm::KEY_PROJECT_SUBTYPES, !($this->uberAdmin)); ?>  
    <?php 
    echo $this->partial('project/project/dynamicFormElements.phtml', array('form' => $this->projectForm, 'div' => 'project-config-elts'));
    ?>
</section>

<h3>Workflow Configuration</h3>
<section>
    <?php echo FormElementFactory::create($this, ProjectForm::KEY_WORKFLOW_TYPES, !($this->uberAdmin)); ?>  
    <?php echo FormElementFactory::create($this, ProjectForm::KEY_WORKFLOW_SUBTYPES, !($this->uberAdmin), true); ?>
    <?php echo FormElementFactory::create($this, ProjectForm::KEY_PROJECT_WORKFLOW_CONFIG, !($this->uberAdmin)); ?>
</section>

我可以在这里添加一个永久高度，但它不是动态的

该表单是Zend表单，因此HTML如下所示：

.wizard > .content
{
    background: #eee;
    display: table-cell;
    margin: 0.5em;
    min-height: 35em;
    position: relative;
    width: auto;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

 <div class="container-fluid">
<?php if ($this->error) : ?>
<div class="row-fluid">
    <?php echo $this->error; ?>
</div>
<?php else : ?>
<?php echo $this->form()->openTag($form); ?>

<h3>Details</h3>
<section>
    <?php echo FormElementFactory::create($this, ProjectForm::KEY_PROJECT_NAME, false, true); ?>
    <?php echo FormElementFactory::create($this, ProjectForm::KEY_PROJECT_DUE_DTTM, !($this->uberAdmin)); ?>
    <?php echo FormElementFactory::create($this, ProjectForm::KEY_PROJECT_DESCRIPTION); ?>
</section>
<h3>Options</h3>
<section>
    <?php echo FormElementFactory::create($this, ProjectForm::KEY_REVIEW_PROJECT); ?>
    <?php echo FormElementFactory::create($this, ProjectForm::KEY_WTL_PROJECT); ?>
    <?php echo FormElementFactory::create($this, ProjectForm::KEY_JOB_TABLE); ?>
</section>
<h3>Project Configuration</h3>
<section>
    <?php echo FormElementFactory::create($this, ProjectForm::KEY_PROJECT_TYPES, !($this->uberAdmin), true); ?>
    <?php echo FormElementFactory::create($this, ProjectForm::KEY_PROJECT_SUBTYPES, !($this->uberAdmin)); ?>  
    <?php 
    echo $this->partial('project/project/dynamicFormElements.phtml', array('form' => $this->projectForm, 'div' => 'project-config-elts'));
    ?>
</section>

<h3>Workflow Configuration</h3>
<section>
    <?php echo FormElementFactory::create($this, ProjectForm::KEY_WORKFLOW_TYPES, !($this->uberAdmin)); ?>  
    <?php echo FormElementFactory::create($this, ProjectForm::KEY_WORKFLOW_SUBTYPES, !($this->uberAdmin), true); ?>
    <?php echo FormElementFactory::create($this, ProjectForm::KEY_PROJECT_WORKFLOW_CONFIG, !($this->uberAdmin)); ?>
</section>

细节
选择权
项目配置
工作流配置

这将生成具有以下结构的HTML：

突出显示的div就是有问题的div

我的AJAX调用在这里完成：

    // Handle AJAX dynamic form creation results
    function updateProjectForm(resp) {
        $('div#project-config-elts').html(resp.html);
    }

    // Handle ajax error
    function projectFormError(req, status, err) {
        var errorString = '<div class="row-fluid alert alert-error">' +
            'Error retrieving project form.' +
            '</div>';
        $('div#project-config-elts').html(errorString);
    }

    // AJAX request to get dynamic Project config form
    function requestProjConfigForm() {
        var request = {project_type: $('select[name=project_types]').val(),
                project_subtype: $('select[name=project_subtypes]').val()
        };

         var ajaxOptions = {
            url: 'projectform',
            type:'POST',
            dataType: 'json',
            success: updateProjectForm,
            error: projectFormError,
            data: request
        };

        // Initiate the request!
        $.ajax(ajaxOptions);
    }

    $('select[name=project_types]').change(function(){
        updateProjectSubtypes(); 
    }); 

    // Handle a change in the selection of the particular project
    $('select[name=project_subtypes]').change(function(){
        requestProjConfigForm();
    }); 

    $('select[name=workflow_types]').change(function(){
        updateWorkflowSubtypes(); 
    }); 

    $.validator.addMethod("validJSON", function(val, el) {
        try {
            JSON.parse(val);
            return true;
        } catch(e) {
            return false;
        }
    }, "*Not valid JSON");

    form.validate({
        errorPlacement: function(error, element) {
            $( element )
                .closest( "form" )
                    .find( "label[for='" + element.attr( "id" ) + "']" )
                        .append( error );
        },
        rules: {
            project_config: { validJSON: true }
        }
    });

//处理AJAX动态表单创建结果
函数updateProjectForm（resp）{
$（'div#project config elts'）.html（resp.html）；
}
//处理ajax错误
函数projectFormError（请求、状态、错误）{
var errorString=''+
“检索项目表单时出错。”+
'';
$（'div#project config elts'）.html（errorString）；
}
//获取动态项目配置表单的AJAX请求
函数requestProjConfigForm（）{
var request={project_type:$（'select[name=project_types]'）。val（），
项目子类型：$（'select[name=project\u subtypes]'）。val（）
};
变量ajaxOptions={
url:'projectform'，
类型：'POST'，
数据类型：“json”，
成功：updateProjectForm，
错误：projectFormError，
数据：请求
};
//发起请求！
$.ajax（ajaxOptions）；
}
$（'select[name=project_types]'）。更改（函数（）{
updateProjectSubtypes（）；
}); 
//处理特定项目选择中的更改
$（'select[name=project_subtypes]'）。更改（函数（）{
requestProjConfigForm（）；
}); 
$（'select[name=workflow_types]'）。更改（函数（）{
updateWorkflowSubtypes（）；
}); 
$.validator.addMethod（“validJSON”，函数（val，el）{
试一试{
JSON.parse（val）；
返回true；
}捕获（e）{
返回false；
}
}，“*不是有效的JSON”）；
form.validate({
errorPlacement:函数（错误，元素）{
$（元素）
.最近的（“表格”）
.find（“label[for='”+element.attr（“id”）+“']”）
.append（错误）；
},
规则：{
项目配置：{validJSON:true}
}
});

---

我在想，在这里我可以动态地改变高度，但我不太确定如何做到这一点

您似乎遇到了jQuery步骤插件github页面上讨论过的问题：

基本上，由于步骤内容的主体以百分比高度绝对定位，因此其高度不再基于其中的内容。人们用来解决这个问题的几件事是：

作者：

下面是另一种替代方法，它会导致溢出的内容滚动：

.wizard.clearfix > .content.clearfix{
    min-height: 500px;
    overflow-y: auto;
}

---

查看问题页面的链接，以更好地解释这两个问题。但是请注意，任何涉及删除绝对位置的解决方案都可能导致转换不再工作。

我们实际上也需要一些HTML。您应该将目标定为只使用css的解决方案。可能从移除溢出开始：隐藏；你可以发布一个被剪断的密码吗？@HorstJahns更新！表单使用Zend框架，因此单个元素的HTML是通过ZendAuto生成的HTML创建的，这可能是个问题。您应该在chrome/ff中调试并尝试更改css。这是一个造型问题！如果我们连实际的html都没有，那真的很难找到解决方案。@HorstJahns好吧，我一直在玩开发工具，我已经看到在CSS代码片段中更改div的高度将完全满足我的需要，它不是动态的。所以我只需要弄清楚如何更新div的高度。我可以发布生成的html