JS：动态添加相对div时扩展position：absolute parent

Question

我使用绝对定位的容器在“下一步”和“返回”上左右滑动屏幕。 您可以在这里看到： http : //opencdesign.herokuapp.com/offer

单击“得到它”以移至第二屏，这就是问题所在。 如果单击“添加项目或类别”的次数足够多，则输入将超出页脚。

添加输入时扩展窗口高度的最简单方法是什么？ 除了使用绝对定位之外，我还开放了向左和向右滑动屏幕的另一种方法。

的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并通过scroll处理它overflow-y （或者，如果您想扩展它，可以增加其大小）。 举一个简单的例子，使用jQuery，您可以在条件后面加上$('#mydiv').css("overflow-y", "scroll"); （尽管看起来该div当前没有ID或自定义的类名，所以可以随时将其更改为最合适的名称）。

另外，您可以使用第二个隐藏的div（它是该父级的父对象），然后展开隐藏的div。 通过使用相对大小，您可以填写不可见的父=）

看起来不错！