2015-02-08 139 views
0

我有CSS一個div因爲這如何設置此高度自動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> 

但問題是我收到的股利以這種方式?

enter image description here

我怎樣才能解決這個問題。我想div應該有自動高度,它會自動伸展

+0

Post full CSS +嘗試在div上使用'relative'定位和'z-index:100;'。 – 2015-02-08 17:42:23

+0

首先,將單獨的CSS文件中的樣式與內聯樣式混合並不是一個好主意。你已經聲明瞭固定的'height:height:480px';在'#middle2'樣式中,然後用inline'style =「height:auto; ...'覆蓋它;如果可以的話,避免這種情況 - 只能在單獨的CSS文件中定義樣式,如果希望它自動伸展,所有高度樣式('height:auto;'默認使用);其次,你指定了'position:absolute;'這意味着你已經打破了DOM組件的流動,這就是爲什麼footer沒有被壓下的原因。相對;'@ThePragmatick說 – Fallup 2015-02-08 17:48:32

回答

0

如果我正確解讀你的圖像,該div是自動調整其高度。

但是,因爲使用了:

position: absolute 

該div不再在頁面的流量。這意味着它下面的元素可以移動到重疊。

如果這是問題,有很多方法可以解決這個問題,這取決於頁面的其他部分是什麼樣的。