根据剩余空间自动调整Div（占以下Div）

Question

我试图把一些DOM放在一起，我真的不确定如何解决以下问题。我基本上需要一个可见的.filterArea，并且它上方的区域占用剩余的空间。困难的是我希望.filterArea根据宽度做出响应，而且我不知道我的总身高。

＆＃13;

＆＃13;

body {
  background-color: #fff;
}

.mainArea {
  background: red;
  color: white;
}

.filter-area .tags {
  padding: 10px;
}

.tag {
  margin: 5px;
  padding: 5px;
  background-color: #f6f6f6;
  display: inline-block;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <div class="mainArea">
  <p>
  This is the main area
  </p>
  </div>

  <div class="filterArea" data-bind="component: filterComponent">
    <div class="filter-area">
      <!-- Represent the different tags that can be applied as filters -->
      <div class="tags">
        <div class="tag" data-tag="lessThan" data-bind="click: addTag, dl-filterTagRipple">
          <span class="name">Less than</span>
          <span class="value" data-bind="dl-siformat: arg1">0</span>
        </div>
        <div class="tag" data-tag="lessThanOrEqualTo" data-bind="click: addTag, dl-filterTagRipple">
          <span class="name">Less than or equal</span>
          <span class="value" data-bind="dl-siformat: arg1">0</span>
        </div>
        <div class="tag" data-tag="equals" data-bind="click: addTag, dl-filterTagRipple">
          <span class="name">Equals</span>
          <span class="value" data-bind="dl-siformat: arg0">0</span>
        </div>
        <div class="tag" data-tag="greaterThan" data-bind="click: addTag, dl-filterTagRipple">
          <span class="name">Greater than</span>
          <span class="value" data-bind="dl-siformat: arg0">0</span>
        </div>
        <div class="tag" data-tag="greaterThanOrEqualTo" data-bind="click: addTag, dl-filterTagRipple">
          <span class="name">Greater than or equal</span>
          <span class="value" data-bind="dl-siformat: arg0">0</span>
        </div>
        <div class="tag" data-tag="between" data-bind="click: addTag, dl-filterTagRipple">
          <span class="name">Between</span>
          <span class="value" data-bind="dl-siformat: arg0">0</span>
          <span class="name">and</span>
          <span class="value" data-bind="dl-siformat: arg1">0</span>
        </div>
        <div class="tag" data-tag="within" data-bind="click: addTag, dl-filterTagRipple">
          <span class="name">Within</span>
        </div>
        <div class="tag" data-tag="empty" data-bind="click: addTag, dl-filterTagRipple">
          <span class="name">Empty</span>
        </div>
      </div>
      <div class="filters scrollable numberFilters filtersEmpty" data-bind="css: filters().length === 0 ? 'filtersEmpty' : ''">
        <div data-bind="dl-filter-scroll-top:$parent"></div>
        <div data-bind="template: { foreach:filters,
                                    name: function(item) { return item.func(); },
                                    afterAdd: showFilter,
                                    beforeRemove: hideFilter  }"></div>
      </div>
    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;

我已经看到了一些解决方案，但他们都依赖于必须知道.filterArea的固定高度。我是否可以应用一些CSS魔法，以便在处理.filterArea后根据剩余空间调整顶部部分的大小？

Answer 1

您可以使用 CSS flexbox 以及使用body { background-color: #fff; } .container { height: 100vh; display: flex; flex-direction: column; } .mainArea { background: red; color: white; flex: 1; } .filter-area .tags { padding: 10px; } .tag { margin: 5px; padding: 5px; background-color: #f6f6f6; display: inline-block; }单位将总高度设置为视口高度的容器来执行此操作。

＆＃13;

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <div class="mainArea">
  <p>
  This is the main area
  </p>
  </div>

  <div class="filterArea" data-bind="component: filterComponent">
    <div class="filter-area">
      <!-- Represent the different tags that can be applied as filters -->
      <div class="tags">
        <div class="tag" data-tag="lessThan" data-bind="click: addTag, dl-filterTagRipple">
          <span class="name">Less than</span>
          <span class="value" data-bind="dl-siformat: arg1">0</span>
        </div>
        <div class="tag" data-tag="lessThanOrEqualTo" data-bind="click: addTag, dl-filterTagRipple">
          <span class="name">Less than or equal</span>
          <span class="value" data-bind="dl-siformat: arg1">0</span>
        </div>
        <div class="tag" data-tag="equals" data-bind="click: addTag, dl-filterTagRipple">
          <span class="name">Equals</span>
          <span class="value" data-bind="dl-siformat: arg0">0</span>
        </div>
        <div class="tag" data-tag="greaterThan" data-bind="click: addTag, dl-filterTagRipple">
          <span class="name">Greater than</span>
          <span class="value" data-bind="dl-siformat: arg0">0</span>
        </div>
        <div class="tag" data-tag="greaterThanOrEqualTo" data-bind="click: addTag, dl-filterTagRipple">
          <span class="name">Greater than or equal</span>
          <span class="value" data-bind="dl-siformat: arg0">0</span>
        </div>
        <div class="tag" data-tag="between" data-bind="click: addTag, dl-filterTagRipple">
          <span class="name">Between</span>
          <span class="value" data-bind="dl-siformat: arg0">0</span>
          <span class="name">and</span>
          <span class="value" data-bind="dl-siformat: arg1">0</span>
        </div>
        <div class="tag" data-tag="within" data-bind="click: addTag, dl-filterTagRipple">
          <span class="name">Within</span>
        </div>
        <div class="tag" data-tag="empty" data-bind="click: addTag, dl-filterTagRipple">
          <span class="name">Empty</span>
        </div>
      </div>
      <div class="filters scrollable numberFilters filtersEmpty" data-bind="css: filters().length === 0 ? 'filtersEmpty' : ''">
        <div data-bind="dl-filter-scroll-top:$parent"></div>
        <div data-bind="template: { foreach:filters,
                                    name: function(item) { return item.func(); },
                                    afterAdd: showFilter,
                                    beforeRemove: hideFilter  }"></div>
      </div>
    </div>
  </div>

＆＃13;

$(document).ready(function() {
  $('#new-btn').on('click', function() {
    $('#new-div').append($('.fileinputs').html());
  });

  $(document).on('fileselect', '.btn-file :file', function(event, numFiles, label) {
    var input = $(this).closest('.input-group').find(':text'),
      log = numFiles > 1 ? numFiles + ' files selected' : label;
    if (input.length) {
      input.val(log);
    } else {
      if (log) alert(log);
    }
  });
});

$(document).on('change', '.btn-file :file', function() {
  var input = $(this),
    numFiles = input.get(0).files ? input.get(0).files.length : 1,
    label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
  input.trigger('fileselect', [numFiles, label]);
  console.log('triggered');
});

＆＃13;

＆＃13;

＆＃13;