Wordpress聯繫表格突破格

Question

我有this jsfiddle由於某種原因，當我將消息框向右延伸並向下保持元素的灰色div不隨它擴展。我怎麼能這樣做，當用戶放大消息框的灰色元素的比例尺與它？

這是容器的信息，我從鉻複製：

<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