如何为某些元素自动调整div的大小，但让其他元素重叠呢？

Question

我有一个网站，其中包含一个包含输入表单的模式对话框。表单底部的文本框设置为使用自动完成列表在您键入时建议选项。这是由一个先行的javascript模块提供的。

默认情况下，预先输入列表位于模式页脚下方：

所以我编辑了包含dev的css，将'overflow'设置为'visible'。这允许typeahead与页脚重叠，但div缩小了，因为它不再需要包含所有内容：

我能想到解决这个问题的唯一方法是使div的高度保持不变，但现在我遇到的问题是错误框可以将内容推送到页脚中：

我的问题是：有没有办法可以设置div以便自动调整大小以适应其常用内容（输入框和验证框），但是允许建议列表与页脚重叠？

我在这里附上了HTML：

<div class="modal-body"  @*Note! This height value will need to be updated if the contents change, it is here to allow the Typeahead list to 
overlap the rest of the div*@ style="height: 345px; overflow: visible">
<!-- Container for top half of objection form -->
<div class="span4 offset2">

    @Html.Partial("OfferDisplay",Model.OfferDisplayModel)

</div>
<div class="span8">
    <form id="rejectionForm" class="form-horizontal" method="POST" data-ajax-pubsubupdate="RenderPresentOfferOptionsForm">
        <input type="hidden" value="@Model.NegotiationSessionId" name="NegotiationSessionId"/>
        <hr />

        <div class="control-group">
            @Html.LabelFor(m => m.RejectionReasonId, new { @class = "control-label" })
            <div class="controls">
                @Html.DropDownListFor(m => m.RejectionReasonId, Model.RejectionReasons, new { @class = "input-large" })
                <button type="button" class="btn pull-right btn-validation" tabindex="-1" disabled="disabled"><i class="icon-ok"></i><i class="icon-warning-sign"></i></button>

                <div class="help-block">
                    <p>@Html.ValidationMessageFor(m => m.RejectionReasonId)</p>
                </div>
            </div>
        </div>

        <div class="control-group">
            @Html.LabelFor(m => m.TargetPrice, new { @class = "control-label" })
            <div class="controls">
                <div class="input-prepend">
                    <span class="add-on"><i class="icon-gbp"></i></span>@Html.TextBoxFor(m => m.TargetPrice, new { @class = "input-medium", style = "width:162px", @data_val_keypressfilter_regex = UIValidationRegularExpressions.NumberKeyPressFilterRegex })
                </div>
                <button type="button" class="btn pull-right btn-validation" tabindex="-1" disabled="disabled"><i class="icon-ok"></i><i class="icon-warning-sign"></i></button>
            </div>
        </div>

        <div class="control-group">
            @Html.LabelFor(m => m.CompetitorNameId, new { @class = "control-label" })
            <div class="controls">
                <div class="input-prepend">
                    <input id="competitorName" type="text" data-provide="typeahead" class="input-large" style="width: 198px"/>
                </div>

                <button type="button" class="btn pull-right btn-validation" tabindex="-1" disabled="disabled"><i class="icon-ok"></i><i class="icon-warning-sign"></i></button>
            </div>
        </div>
        <!-- the real submit button has to be hidden because the button we want to click is outside this div, and the form cannot span both divs -->
        <input id="RejectionFormSubmitButton" type="submit" style="display: none"/>
        <input id="competitorIdField" name="CompetitorNameId" type="hidden"/>
        <input id="showNextOfferInput" type="hidden" value="true" name="ShowNextOffer"/>
    </form>
    </div>
</div>
<div class="modal-footer">

<form method="POST" data-ajax-pubsubupdate="RenderOverrideConfirmationForm">
    <input type="hidden" value="@Model.NegotiationSessionId" name="NegotiationSessionId" />
    <input type="hidden" value="@Model.SchemeId" name="SchemeId" />
    <button class="btn btn-warning pull-left" type="submit"><i class="icon-warning-sign"></i> @Html.DisplayNameFor(m => m.OverrideButton)</button>

    <input id="cancelButton" class="btn" type="button" value="@Html.DisplayNameFor(m => m.CancelButton)"/>

    @if (Model.OfferDisplayModel.Offer.IsFinalOffer)
    {
        <input id="submitAndCloseButton" class="btn btn-primary" type="button" value="@Html.DisplayNameFor(m => m.SubmitAndCloseButton)"/>
    }
    else
    {
        <input id="rejectAndShowNextOffer" class="btn btn-primary" type="button" value="@Html.DisplayNameFor(m => m.SubmitButton)"/>
    }
</form>

Answer 1

您应该尝试使用“z-index”css属性。