如何在填充容器高度的其余部分时使元素可滚动

Question

我试图创建一个简单的搜索面板，包括：容器内的文本框，结果，寻呼机。

要求是容器是灵活的，而不是固定的大小。当容器的大小发生变化时，其子容也会发生如下变化：

1. 文本框：宽度更改，高度修正，顶部的锚点
2. 结果：宽度更改，高度更改，可滚动（如果内容溢出，则显示滚动条）
3. 寻呼机：宽度变化，高度变化，底部固定。

我设法使用TABLE作为容器存档，但结果在浏览器（IE，Firefox，Chrome）中不一致。

1. IE11
   • 没有内容：好的
   • w content：NG：结果扩展（打破布局）
2. 铬：
   • 没有内容：好的
   • w content：好的
   • 两者：尽管有border-collapse:collapse
   ，但TR之间仍存在差距
3. 火狐：
   • 没有内容：NG：结果缩小（打破布局）
   • w content：NG：结果扩展（打破布局）

我试图修复上述问题或为我的设计找到另一种方法。我需要纯粹的CSS解决方案，原因。谢谢！

＆＃13;
＆＃13;
$(function() {
  var ds = new kendo.data.DataSource({
    data: [1, 2, 3, 4, 5],
    pageSize: 2
  });


  $("#pager").kendoPager({
    dataSource: ds
  });

  $("#container").resizable({
      minHeight: 250,
      minWidth: 250
  });
  
  $("p").hide();
  $("#add").on("click", function() {
    $("p").toggle();
    });
});
＆＃13;
#container {
  height: 250px;
  width: 250px;
  margin-top: 5px;
}
#container table {
  height: 100%;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
#container td {
  padding: 0;
}
#container td>* {
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#container tr.fit-content {
  height: 1px;
}
#container .scroll-content {
  padding: 2px 0 0;
}
#container .result {
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: auto;
}
＆＃13;
<link href="https://code.jquery.com/ui/1.12.0-beta.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.ui.core.min.js"></script>
<link href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css" rel="stylesheet" />

<span id="add" class="k-button" aria-disabled="false" tabindex="0">
  Toggle Result's contents
</span>
<div id="container">
  <table>
    <tr class="fit-content">
      <td>
        <span class="k-textbox k-space-right">
                    <input type="text"/>
                    <a href="javascript:;" class="k-icon k-i-search"></a>
                </span>
      </td>
    </tr>
    <tr>
      <td class="scroll-content">
        <div class="k-widget result">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a ligula justo, et varius mauris. Vivamus eleifend feugiat tortor ut egestas. Donec risus diam, vestibulum ut pharetra vitae, scelerisque quis tellus. Fusce pharetra, diam ut facilisis scelerisque, magna nisl viverra lectus, vel malesuada erat odio nec quam. Sed placerat tellus et turpis rhoncus semper. Sed at molestie turpis. Duis purus dui, ornare ut tristique nec, aliquet et purus. Mauris ullamcorper accumsan elit, vel semper justo accumsan non. Aliquam viverra metus nibh. Maecenas tempus, sapien eu semper pellentesque, lacus nisi venenatis purus, id pretium justo ipsum ac lorem.</p>
        </div>
      </td>
    </tr>
    <tr class="fit-content">
      <td>
        <div id="pager">
        </div>
      </td>
    </tr>
  </table>
</div>
＆＃13;
＆＃13;
＆＃13;