Question

我使用绝对定位的容器在“Next”和“Back”上左右滑动屏幕。你可以在这里看到：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进行定位，并使用overflow-y处理其scroll（或者如果要扩展它，则增加其大小）。举一个简单的例子，使用jQuery，你可以得到一个条件，后跟$('#mydiv').css("overflow-y", "scroll");（虽然它看起来不像div当前有一个ID或自定义Classname，所以随意把它改成最好的）。

或者，您可以使用第二个隐藏的div作为此父级的父级，并展开隐藏的div。通过使用相对大小，您可以填写不可见的父=）

但看起来不错！

JS：展开位置：动态添加相对div

1 个答案: