动态创建DOM元素不增加div尺寸

Question

我有一个选择下拉菜单，它会根据第一个选择动态更改。 我也可以选择添加更多的选择，这会动态地创建更多下拉选择框。

但是，我希望新的下拉菜单可以增加它们坐在的div的高度（并且将下面的任何内容推下来），但是目前新的下拉菜单似乎只是坐在顶部内容在下面的div。我认为这可能与嵌套的div有关，但会感谢一些帮助。

这里是我的结构：

<div class="pageMiddle"> 
<div id="tutor_profile_container"> 
    <div id="profile_pic"> 
    <div class="subjselect"> 
     <h3>Primary Subject</h3> 
    <div class="select"> 
     <select id="subject"> 
     <option value="">Subject</option> 
     <option value="other subjects">other subjests</option> 
     </select> 
    </div> 
    <div id='topic' class='select'> 
     <select id="topic"> 
     <option value="">Topic</option> 
     </select> 
    </div> 
    <a href="#" id="another" class="more" onclick="Repeat(this)">Add Another Subject</a> 
     </div> 
    </div> 
    </div> 
      <div id="tutor_profile"> 
      some form content 
    </div> 
    </div> 
    <hr> 

和JQuery的：

function Repeat(obj) { 
    var currentDiv = $(obj).parents('.subjselect'); 
    console.log(currentDiv) 
    var dropDown = currentDiv.find('select'); 
    console.log(dropDown); 
    dropDown.addClass("select"); 
    dropDown.clone().appendTo('#another'); 
} 
$(function() { 
    $("select#subject").change(function() { 
     var subject = $("select#subject>option:selected").text(); 
     console.log(subject); 
     $.ajax({ 
      type: 'GET', 
      url: 'tutorprofileinput.php', 
      data: { 
       "subject": subject 
      }, 
      dataType: 'json', 

      success: function (data) { 
       console.log(data); 
       var options = []; 

       $.each(data, function (key, val) { 
        counts = Object.keys(data).length; 
        console.log(counts); 
        options += '<option value="' + val.topic + '">' + val.topic + '</option>'; 
        console.log(options); 
       }); 
       $("select#topic").html(options); 
      }, 
      error: function() { 
       // failed request; give feedback to user 
       $('#ajax-panel').html('<p class="error"><strong>Oops!</strong> Try that again in a few moments.</p>'); 
      } 
     }); 
    }) 
}) 

和CSS：

#pageMiddle{ 
    width:940px; 
    margin:0px auto; 
    text-align: left; 
    position:relative; 
} 

#tutor_profile_container{ 
} 

#profile_pic{ 
    border-right:1px solid gray; 
    float:left; 
    width:282px; 
    top:7px; 
    margin-bottom:25px; 
    margin-right: 25px; 
    position:absolute; 
    height:90%; 
} 

#tutor_profile{ 
    position:relative; 
    left:305; 
    width:612; 
    border: 2px dashed yellow; 
    padding-top: 10px; 
} 

.select { 
    margin: 5px; 
    width: 180px; 
    height: 33px; 
    overflow: hidden; 
    background-image: url('../images/new_arrow.jpg'); 
    background-position: right center; 
    background-color: white; 
    border-radius: 5px; 
    background-repeat: no-repeat; 
} 

.select select{ 
    background: transparent; 
    width: 200px; 
    font-size: 16px; 
    line-height: 1; 
    border: 0; 
    border-radius: 0; 
    height: 33px; 
    -webkit-appearance: none; 
    color:#6F6F78; 
    z-index: 3000; 
} 

Answer 1

这个问题是不是由于嵌套的div是由于position:absolute。 div和它的包装等等等应该有一个position:relative