html - 如何在填充其余容器高度的同时使元素可滚动

Question

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

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

1. 文本框:宽度变化、高度固定、 anchor 在顶部
2. 结果:宽度变化，高度变化，可滚动(如果内容溢出则显示滚动条)
3. 寻呼机:宽度变化、高度变化、底部 anchor 。

我通过使用 TABLE 作为容器设法归档了一些东西，但结果在浏览器(IE、Firefox、Chrome)之间不一致。

1. IE11
   • 没有内容:好的
   • 内容:NG:结果展开(破坏布局)
2. Chrome :
   • 没有内容:好的
   • 内容:好的
   • 两者:尽管有 border-collapse:collapse
   ，但 TR 之间仍然存在差距
3. 火狐:
   • 无内容:NG:结果缩小(破坏布局)
   • 内容:NG:结果展开(破坏布局)

我正在尝试解决上述问题或为我的设计寻找另一种方法。由于某些原因，我需要纯 css 解决方案。谢谢!

$(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();
    });
});

#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;
}

<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>

Answer 1

您将容器设置为精确的像素高度，然后告诉您的“.result”填充该高度的 100%。这就是它溢出其他元素的原因。尝试为“.result”设置准确的高度而不是 100%。请记住检查您的填充和边距以及它们如何影响您的高度，并在您选择的数字中考虑到这一点。

此外，浏览器对 100% 高度的解释也不同。由于您没有设置父级 TD 和 TR 的高度，因此百分比设置可能会导致崩溃。