Html 如何将此div的高度设置为自动？
我有一个带有css的div，如下所示Html 如何将此div的高度设置为自动？,html,css,Html,Css,我有一个带有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就是
#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;
}
<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应该具有自动高度，并且它将自动拉伸如果我正确解读您的图像，div将自动调整其高度 但是，因为您使用了：
position: absolute
如果这就是问题所在，那么根据页面其余部分的情况，有多种方法可以解决它。发布完整CSS+尝试使用相对定位和z-index:100；首先，在单独的CSS文件中混合样式和内联样式不是一个好主意。您已声明固定高度：高度：480px；在middle2样式中，然后使用inline style=height:auto；覆盖它；。。。如果您只能在单独的CSS文件中定义样式，请避免这种情况。如果希望它自动拉伸，只需删除所有高度样式高度：自动；默认情况下使用。第二，指定位置：绝对位置；这意味着您已经破坏了DOM组件的流，这就是为什么页脚没有向下推；正如帕拉帕特里克所说的那样