JS：展開位置：動態添加相對div時的絕對父級

Question

我使用絕對定位的容器在「Next」和「Back」上左右滑動屏幕。你可以在這裏看到：http://opencdesign.herokuapp.com/offer

點擊「Got it」移動到第二個屏幕，這是問題所在。如果您單擊「添加項目或類別」足夠多的時間，輸入將會擴展到頁腳之後。

當我添加輸入項時，擴大窗口高度的最簡單方法是什麼？我也開放了一種替代方法，使用左右滑動屏幕，而不是使用絕對定位。

HTML

<div id="offer-2"> 
     <div class="row one-margin-bottom"> 
     <div class="small-12 medium-11 small-centered columns"> 
      <h5 class="">What share of purchases will you accept in Currents?</h5> 
      <!-- <a class="offer-info-popup_open"><i class="half-margin-right fa fa-lg fa-question-circle"></i>How it works</a> --> 
     </div> 
     </div> 

     <div class="row left"> 
     <div class="small-12 medium-6 small-centered columns"> 
      <div class="row"> 
      <div class="input-left small-3 columns"> 
       <p><strong><img class="" src="{% static 'img/symbol-navy.svg' %}"/> share</strong></p> 
      </div> 

      <div class="input-right small-9 columns"> 
       <p id="item-title"><strong>Item or category</strong></p> 
      </div> 
      </div> 
     </div> 
     </div> 

     <div class="row"> 
     <div class="small-12 medium-6 small-centered columns"> 
      <div id="item-1" class="row collapse"> 
      <div class="input-left small-3 columns"> 
       <div class="relative"> 
       <input name="discount-amount-1" type="number" class="fit-left qtr-margin-right" placeholder="20" value="20"/> 
       <span class="input-icon-right">%</span> 
       </div> 
       <!-- <span class="input-sizer"><select name="discount-type-1"> 
       <option selected>% of</option> 
       <option>$ of</option> 
       </select></span> --> 
      </div> 

      <div class="input-right small-9 columns"> 
       <div class="fit-left half-margin-top one-margin-right one-margin-left">of</div> 
       <div class="relative input-sizer"> 
       <input name="item-name-1" type="text" placeholder="Item or category name" value="All products" class="good-cat" /> 
       <i class="remove-input alert fa fa-times"></i> 
       </div> 
      </div> 
      </div> 

      <div id="item-2" class="row collapse"> 
      <div class="input-left small-3 columns"> 
       <div class="relative"> 
       <input name="discount-amount-2" type="number" class="fit-left qtr-margin-right" placeholder="20" value="20"/> 
       <span class="input-icon-right">%</span> 
       </div> 
       <!-- <span class="input-sizer"><select name="discount-type-1"> 
       <option selected>% of</option> 
       <option>$ of</option> 
       </select></span> --> 
      </div> 

      <div class="input-right small-9 columns"> 
       <div class="fit-left half-margin-top one-margin-right one-margin-left">of</div> 
       <div class="relative input-sizer"> 
       <input name="item-name-2" type="text" placeholder="Item or category name" value="All services" class="good-cat" /> 
       <i class="remove-input alert fa fa-times"></i> 
       </div> 
      </div> 
      </div> 

      <a id="add-item" class=""><i class="half-margin-top fa fa-plus-circle half-margin-right"></i>Add item or category</a> 

      <div class="row one-margin-top"> 
      <a class="prev-offer button round secondary">Back</a> 
      <a class="next-offer button round">Next</a> 
      </div> 
     </div> 
     </div> 
    </div> 

JS

var id = 3 

    $('#add-item').click(function(){ 
     $(this).before('<div id="item-'+id+'" class="row collapse hidden"><div class="input-left small-3 columns"><div class="relative"><input name="discount-amount-'+id+'" type="number" class="fit-left qtr-margin-right" placeholder="20" value="20"/><span class="input-icon-right">%</span></div></div><div class="input-right small-9 columns"><div class="fit-left half-margin-top one-margin-right one-margin-left">of</div><div class="relative input-sizer"><input name="item-name-'+id+'" type="text" placeholder="Item or category name" /><i class="remove-input alert fa fa-times"></i></div></div></div>'); 
     $('#item-'+id+'').slideDown(); 

     id ++ 
    }); 

Answer 1

我想你可能靶，利用CSS規則div和處理其overflow-y與scroll（或增加它的大小，如果你想擴大它）。舉個簡單的例子，使用jQuery，你可能會遇到一個條件，然後是$('#mydiv').css("overflow-y", "scroll");（儘管它看起來不像div當前有一個ID或自定義Classname，所以可以隨意將其改爲任何效果最好的）。

或者，您可以使用第二個隱藏的div，它是此父級的父級，並展開隱藏的div。通過使用相對大小，你可以填寫隱形父=）

它看起來不錯，但！