Question

我将this jsfiddle出于某种原因，当我将消息框向右延伸并向下延伸时，灰色div保持元素不会随之延伸。当用户放大消息框时，如何将灰色元素div与它一起缩放？

这是我从chrome复制的容器信息：

<div class="one_third last">
    <div class="framed_box rounded">
        <div class="framed_box_content" style="height:500px;">

<h3 style="text-align: center;">Request a Quote</h3>

            <div class="quote" style="font-size: 11px; padding: 0 0 0 15px; _padding: 0;">
                <div class="wpcf7" id="wpcf7-f3658-p3891-o1">
                    <form action="/#wpcf7-f3658-p3891-o1" method="post" class="wpcf7-form" novalidate="novalidate">
                        <div style="display: none;">
                            <input type="hidden" name="_wpcf7" value="3658">
                            <br>
                            <input type="hidden" name="_wpcf7_version" value="3.6">
                            <br>
                            <input type="hidden" name="_wpcf7_locale" value="">
                            <br>
                            <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f3658-p3891-o1">
                            <br>
                            <input type="hidden" name="_wpnonce" value="691674e2bf">
                        </div>
                        <p>Name (required) <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="30" maxlength="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></span>
                            <br>Email (required) <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="30" maxlength="60" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false"></span>
                            <br>Phone (required) <span class="wpcf7-form-control-wrap your-subject"><input type="text" name="your-subject" value="" size="30" maxlength="12" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></span>
                            <br>Zip (required) <span class="wpcf7-form-control-wrap your-zip"><input type="text" name="your-zip" value="" size="30" maxlength="5" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></span>
                            <br>I am Interested in (Check all that Apply):
                            <br>
<span class="wpcf7-form-control-wrap tub-prod"><span class="wpcf7-form-control wpcf7-checkbox"><span class="wpcf7-list-item"><input type="checkbox" name="tub-prod[]" value="Walk In Bathtubs">&nbsp;<span class="wpcf7-list-item-label">Walk In Bathtubs</span></span>
                            </span>
                            </span>
                            <br>
<span class="wpcf7-form-control-wrap shower-prod"><span class="wpcf7-form-control wpcf7-checkbox"><span class="wpcf7-list-item"><input type="checkbox" name="shower-prod[]" value="Walk In Showers">&nbsp;<span class="wpcf7-list-item-label">Walk In Showers</span></span>
                            </span>
                            </span>
                            <br>
<span class="wpcf7-form-control-wrap install-needed"><span class="wpcf7-form-control wpcf7-checkbox"><span class="wpcf7-list-item"><input type="checkbox" name="install-needed[]" value="Renovations/Remodeling">&nbsp;<span class="wpcf7-list-item-label">Renovations/Remodeling</span></span>
                            </span>
                            </span>
                            <br>Message
                            <br><span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="28" rows="1" maxlength="200" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span> 
                            <br>
                            <input type="hidden" name="_wpcf7_captcha_challenge_captcha-146" value="1307789336">
                            <img class="wpcf7-form-control wpcf7-captchac wpcf7-captcha-captcha-146" width="60" height="20" alt="captcha" src="http://test.com/wp-content/uploads/wpcf7_captcha/1307789336.png">
                            <br>
<span class="wpcf7-form-control-wrap captcha-146"><input type="text" name="captcha-146" value="" size="28" class="wpcf7-form-control wpcf7-captchar" aria-invalid="false"></span>
                        </p>
                        <p style="margin-top:0px;">
                            <input type="submit" value="Submit Request" class="wpcf7-form-control wpcf7-submit button">
                            <img class="ajax-loader" src="http://test.com/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." style="visibility: hidden;">
                        </p>
                        <div class="wpcf7-response-output wpcf7-display-none"></div>
                    </form>
                </div>
            </div>
            <div class="clearboth"></div>
        </div>
    </div>
</div>

Answer 1

您可能需要在position:absolute

指定.rounded

  .rounded, .rounded .framed_box_content {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    position:absolute;
}

我已经注意到你的静态height value of 500px所以只需将其更改为height:auto，然后再改变你的所有优点。我也更新了小提琴。这是一个jsfiddle

Wordpress联系表格突破div

1 个答案: