Question

这是我的HTML：

＆＃13;

.parent{
  position: fixed;
  border: 1px solid;
  height: 43%;
  width: 300px;
}

.first_el{
  display:block;
  border: 1px solid green;
  height: 30px; /* constant */
}

.second_el{
  border: 1px solild red;
  height: 100%; /* dynamic */
  overflow: scroll;
}

＆＃13;

<div class="parent">
  <span class="first_el">title</span>
  <div class="second_el">
    one<br>two<br> three<br> four<br> five<br> six<br> seven<br> eight<br>nine<br>
  </div>
</div>

＆＃13;

如您所见，第二个元素不在其父元素之内。问题是我如何将其全部设置为所有屏幕尺寸的父级？

注意到我可以使用calc(100%-30px)作为height的{{1}}，然后问题就会得到解决。但据我所知，旧浏览器.second_el并不支持calc，因此我不想使用它。还有其他选择吗？ （我也不想使用calc()，因为旧版浏览器）

Answer 1

您可以使用jQuery以编程方式设置高度，并在调整大小时绑定处理程序。

  init.push(function() {
    $('#wizard-forms').pixelWizard({
      onFinish: function() {
        // Disable changing step. To enable changing step just call this.unfreeze()
        this.freeze();
      }
    });
    $('#wizard-forms .wizard-prev-step-btn').on('click', function() {
      $('#wizard-forms').pixelWizard('prevStep');
      return false;
    });

    // Account page

    $("#wizard-account").validate({
      ignore: '.ignore',
      focusInvalid: true,
      rules: {
        'username': {
          required: true,
          minlength: 3,
          maxlength: 20
        },
        'password': {
          required: true,
          minlength: 6,
          maxlength: 20
        },
        'repeat-password': {
          required: true,
          minlength: 6,
          equalTo: 'input[name="password"]'
        },
        'email': {
          required: true,
          email: true
        },
      }
    });
    $('#wizard-account').on('submit', function() {
      if ($(this).valid()) {
        $('#wizard-forms').pixelWizard('nextStep');
      }
      return false;
    });

    // Profile page

    $('#country').select2({
      allowClear: true,
      placeholder: 'Select a country...'
    }).change(function() {
      $(this).valid();
    });
    $("#wizard-profile").validate({
      ignore: '.ignore, .select2-input',
      focusInvalid: true,
      rules: {
        'full_name': {
          required: true
        },
        'country': {
          required: true
        },
        'subscription': {
          required: true
        },
        'gender1': {
          require_from_group: [1, 'input[name="gender1"], input[name="gender2"]']
        },
        'gender2': {
          require_from_group: [1, 'input[name="gender1"], input[name="gender2"]']
        }
      }
    });
    $('#wizard-profile').on('submit', function() {
      if ($(this).valid()) {
        $('#wizard-forms').pixelWizard('nextStep');
      }
      return false;
    });

    // Credit card page

    var $wcc = $('#wizard-credit-card')
    $wcc.find('[data-toggle="tooltip"]').tooltip();
    $wcc.find('input[name="postal_code"]').mask("999999");
    $wcc.find('input[name="credit_card_number"]').mask("9999 9999 9999 9999");
    $wcc.find('input[name="csv"]').mask("999");
    $wcc.validate({
      ignore: '.ignore, .select2-input',
      focusInvalid: true,
      rules: {
        'postal_code': {
          required: true,
          digits: true,
          rangelength: [6, 6]
        },
        'credit_card_number': {
          required: true,
          creditcard: true
        },
        'csv': {
          required: true,
          digits: true,
          rangelength: [3, 3]
        }
      }
    });
    $wcc.on('submit', function() {
      if ($(this).valid()) {
        $('#wizard-forms').pixelWizard('nextStep');
      }
      return false;
    });

    // Finish page

    $('#wizard-finish button').click(function() {
      $(this).parent().find('.text-lg').text('THANK YOU!');
      $(this).parent().find('.fa-check').removeClass('fa-check').addClass('fa-check-circle');
      $(this).remove();
      $('#wizard-forms').pixelWizard('nextStep');
      return false;
    });

  });

这是一个小例子：https://jsfiddle.net/15wam02w/

Answer 2

试试这段代码

＆＃13;

.parent{
  position: fixed;
  border: 1px solid;
  height: 43%;
  width: 300px;
  padding-bottom:30px;
  overflow:hidden;
}

.first_el{
  display:block;
  border: 1px solid green;
  height: 30px; /* same as class .parent padding-bottom */
  overflow:hidden;
}

.second_el{
  border: 1px solild red;
  height:100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

＆＃13;

<div class="parent">
  <span class="first_el">title</span>
  <div class="second_el">
    one<br>two<br> three<br> four<br> five<br> six<br> seven<br> eight<br>nine<br>
  </div>
</div>

＆＃13;

Answer 3

<强>已更新

添加您的父类overflow:hidden;

<强> HTML

<div class="parent">
  <span class="first_el">title</span>
  <div class="second_el">
    one
    <br>two
    <br> three
    <br> four
    <br> five
    <br> six
    <br> seven
    <br> eight
    <br>nine
    <br>
  </div>
</div>

<强> CSS

.parent{
  position: fixed;
  border: 1px solid;
  height: 43%;
  width: 300px;
  padding-bottom:30px;
  overflow:hidden;
}

.first_el{
  display:block;
  border: 1px solid green;
  height: 30px;
  overflow:hidden;
}

.second_el{
  border: 1px solid red;
  height:100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

DEMO

Answer 4

在overflow-x:hidden边框中，固体拼写错误就在那里。更正并提供overflow-y: scroll和.second_el{ border: 1px soild red; height: 100%; /* dynamic */ overflow-y: scroll; overflow-x: hidden; }

.parent

删除.second_el类的边框以避免{{1}}

的合并边框

Answer 5

你只需要在父div中添加一个overflow:hidden;即可看到魔法!!

喜欢这个

.parent{
  position: fixed;
  border: 1px solid;
  height: 43%;
  width: 300px;
  overflow:hidden;
}

.first_el{
  display:block;
  border: 1px solid green;
  height: 30px; /* constant */
}

.second_el{
  border: 1px solild red;
  height:80%;
  overflow: scroll;
}

<div class="parent">
  <span class="first_el">title</span>
  <div class="second_el">
    one<br>two<br> three<br> four<br> five<br> six<br> seven<br> eight<br>nine<br>
  </div>
</div>

您还可以查看fiddle。

当高度可变时，如何将两个元素合二为一？

5 个答案: