如何设置此高度自动div？

Question

我有CSS一个div因为这

#middle2 { 
    background: none repeat scroll 0 0 #ffffff; 
    border: 1px solid #e5e5e5; 
    border-radius: 15px; 
    height: 480px; 
    margin-left: 230px; 
    margin-top: 20px; 
    position: absolute; 
    width: 500px; 
} 

的HTML是这个

<div id="middle2" style="height: auto; overflow: hidden;"> 
       <div id="envelop"></div> 
       <div id="envelop_title">Create your Account</div> 
       <div id="e_text"> 
        <p>Creating a account is very easy. Just fill-in the form below, click Submit and then proceed to Login! All done! 
        </p> 
       </div> 

       <div id="c_form"> 
        <div id="form_content" style="height:auto; overflow: hidden;"> 
         <form method="post" action="#" onsubmit="return validation()"> 
          <div class="form_row"> 
           <label class=""><span class="star">*</span> First Name</label> 

           <div class="inputstyle"> 
            <input class="input_col2" type="text" value="" name="first_name" id="np_first_name"/> 
            <div id="firstName_msg" class="div_msg"></div> 
           </div> 
          </div> 

          <div class="form_row"> 
           <label class=""><span class="star">*</span> Last Name</label> 

           <div class="inputstyle"> 
            <input class="input_col2" type="text" value="" name="last_name" id="np_last_name"/> 
            <div id="lastName_msg" class="div_msg"></div> 
           </div> 
          </div> 

          <div class="form_row"> 
           <label class=""><span class="star">*</span> E-mail</label> 

           <div class="inputstyle"> 
            <input class="input_col2" type="text" value="" name="email" id="np_email" onkeyup="check_email()" autocomplete="off"/> 
             <input type="hidden" id="ch_add" name="ch_add" value=""> 
            <div id="email_msg" class="div_msg"></div> 
           </div> 
          </div> 

          <div class="form_row"> 
           <label class=""><span class="star">*</span> Password </label> 

           <div class="inputstyle"> 
            <input class="input_col2" type="password" value="" name="password" id="np_password"/> 
            <div id="pwd_msg" class="div_msg"></div> 
           </div> 
          </div> 

          <div class="form_row"> 
           <label class=""><span class="star">*</span> Confirm Password </label> 

           <div class="inputstyle"> 
            <input class="input_col2" type="password" value="" name="cpassword" id="np_cpassword"/> 
             <input type="hidden" name="ip" id="np_ip" value="<?php echo $this->input->ip_address();?>"> 
            <div id="cpwd_msg" class="div_msg"></div> 
           </div> 
          </div> 

          <div class="form_row"> 
           <label class=""><span class="star">*</span> Contact </label> 

           <div class="inputstyle"> 
            <input class="input_col2" type="text" value="" name="contact" id="contact"/> 
            <div id="cpwd_msg" class="div_msg"></div> 
           </div> 
          </div> 

          <div class="form_row"> 
           <label class=""><span class="star">*</span> Address </label> 

           <div class="inputstyle"> 
            <textarea class="input_col2" name="address" id="address"></textarea> 
            <div id="cpwd_msg" class="div_msg"></div> 
           </div> 
          </div> 

          <div class="form_row"> 
           <label class=""><span class="star">*</span> Country </label> 

           <div class="inputstyle"> 
            <select class="input_col2" id="country" name="country" 
                onchange="get_state(this.value,'state');"> 
               <option value="0">Select Country</option> 
                <?php 
                $country_list = $this->autoload_model->get_data_from_table("td_country","*", 
                              "country_title LIKE '%Canada%'")->result_array(); 
                foreach($country as $bil_cnt) 
                {?> 
                <option value="<?php echo $bil_cnt['country_id'];?>"> 
                 <?php echo $bil_cnt['country_title'];?> 
                </option> 
                <?php 
                }?>  
             </select> 
            <div id="cpwd_msg" class="div_msg"></div> 
           </div> 
          </div> 

          <div class="form_row"> 
           <label class=""><span class="star">*</span> State </label> 

           <div class="inputstyle"> 
            <img src="<?php echo base_url();?>assets/front_assets/images/ajax-loader-1.gif" style="margin: 0 0 0 20px; display:none" id="state_loader"/> 
              <select class="input_col2" id="state" name="state" 
                onchange="get_city(this.value,'city')"> 
               <option value="0">Select State</option> 
              </select> 
            <div id="cpwd_msg" class="div_msg"></div> 
           </div> 
          </div> 

          <div class="form_row"> 
           <label class=""><span class="star">*</span> City </label> 
           <div class="inputstyle"> 
            <img src="<?php echo base_url();?>assets/front_assets/images/ajax-loader-1.gif" style="margin: 0 0 0 20px; display:none" id="city_loader"/> 
             <select class="input_col2" id="city" name="city"> 
              <option value="0">Select City/Suburb</option> 
             </select> 
            <div id="cpwd_msg" class="div_msg"></div> 
           </div> 
          </div> 



          <div class="form_row" id="np_register_message"> 

          </div> 

          <div id="f_button" style="width:123px; height:34px; margin:0 auto; margin-top:30px;"> 
            <a href="javascript:void(0)" id="np_reg_button"><img src="<?php echo base_url();?>assets/front_assets/images/button.jpg" style="width:98px;height:35px;"/></a> 
          </div> 

          <div id="f_bottom"></div> 
         </form> 
        </div> 
       </div> 
      </div> 

但问题是我收到的股利以这种方式？

我怎样才能解决这个问题。我想div应该有自动高度，它会自动伸展

Answer 1

如果我正确解读你的图像，该div是自动调整其高度。

但是，因为使用了：

position: absolute 

该div不再在页面的流量。这意味着它下面的元素可以移动到重叠。

如果这是问题，有很多方法可以解决这个问题，这取决于页面的其他部分是什么样的。