html - 如何将高度设置为自动的这个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 的吗？

我该如何解决这个问题。我希望 div 应该有自动高度，它会自动拉伸(stretch)

Answer 1

如果我正确解读您的图片，div 会自动调整其高度。

但是，因为你用过:

position: absolute

那个div已经不在页面流中了。这意味着它下方的元素可以向上移动以重叠。

如果这是问题所在，有多种方法可以解决它，具体取决于页面其余部分的情况。