基于 CSS DIV 的表格，带有标题和有限高度，必要时显示滚动条 - 百分比高度
Posted
技术标签:
【中文标题】基于 CSS DIV 的表格，带有标题和有限高度，必要时显示滚动条 - 百分比高度【英文标题】：CSS DIV-based table with header and limited height showing scrollbar when necessary - percentage heights 【发布时间】：2012-01-11 14:13:48 【问题描述】：我搜索了高低，找不到特定于这个问题的解决方案。我正在尝试完成以下任务：
定义具有百分比高度的容器 DIV 以用作最大尺寸容器 提供基于内容大小的边框的辅助容器 DIV 有一个固定在该 DIV 顶部的标题 div 在标题下有一个 DIV 列表（类似于表格） 当列表很短时，边框会缩小到内容的大小 如果列表很长（> 外部容器的高度），则为 DIV 列表而不是标题显示滚动条。我整理了以下简化版：
<html>
<head>
<style type="text/css">
.panel height: 10%; border: 1px solid red; overflow: hidden; margin-top: 10px;
.sizer max-height: 100%; border: 1px solid blue;
.header border-bottom: 1px solid black;
.scroll max-height: 100%; overflow: auto;
</style>
</head>
<body>
<div class="panel">
<div class="sizer">
<div class="wrap">
<div class="header">Header</div>
<div class="scroll">
<div>Line1</div>
<div>Line2</div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="sizer">
<div class="wrap">
<div class="header">Header</div>
<div class="scroll">
<div>Line1</div>
<div>Line2</div>
<div>Line3</div>
<div>Line4</div>
<div>Line5</div>
<div>Line6</div>
<div>Line7</div>
<div>Line8</div>
<div>Line9</div>
<div>Line10</div>
<div>Line11</div>
<div>Line12</div>
</div>
</div>
</div>
</div>
</body>
</html>
两个红色框应该是固定大小的。检查 蓝色框的大小应为内容的大小或红色框的最大大小。检查 当下部内容超过红框大小时，滚动条应显示在标题下方。失败
我所做的任何使滚动条显示的更改都会导致顶部的蓝色框放大到其容器的大小，即红色框。例如， .scroll height: 100%
（DIV.wrap 确实有一个目的 - 只是在本例中没有。它旨在为 sizer 提供双边框效果，因此它应该始终与 sizer 大小相同）。
此外，我已经找到了一些解决方案，其中我为 DIV 使用了固定 (px) 大小，但这并不是必需的。特别是在 DIV.panel 上 - 这必须设置为百分比高度。
【问题讨论】：
我想做一些完全一样的事情：Pure CSS Scrollable Table with Fixed Header，但包含的 DIV 不是固定的 px 高度 - 它需要是父级的 % 【参考方案1】：好吧，我想也许我解决了。我认为因为你有溢出：隐藏和容器 div 的高度，而不是变量滚动 div。只需尝试下面的代码并告诉我。我已将 10% 的高度添加到滚动 div 而不是整个容器。希望这就是你要找的东西
<html>
<head>
<style type="text/css">
.panel border: 1px solid red; overflow: hidden; margin-top: 10px;
.sizer max-height: 100%; border: 1px solid blue; display:block;
.header border-bottom: 1px solid black;
.scroll height: 10%;overflow-y: scroll; display:block;
.scroll div display:block; line-height:normal; clear:both; height:20px;
</style>
</head>
<body>
<div class="panel">
<div class="sizer">
<div class="wrap">
<div class="header">Header</div>
<div class="scroll">
<div>Line1</div>
<div>Line2</div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="sizer">
<div class="wrap">
<div class="header">Header</div>
<div class="scroll">
<div>Line1</div>
<div>Line2</div>
<div>Line3</div>
<div>Line4</div>
<div>Line5</div>
<div>Line6</div>
<div>Line7</div>
<div>Line8</div>
<div>Line9</div>
<div>Line10</div>
<div>Line11</div>
<div>Line12</div>
</div>
</div>
</div>
</div>
</body>
</html>
【讨论】：
快到了。唯一的问题是，在“上部”部分，由于内容的大小小于面板，我需要将 sizer（蓝色边框）缩小到内容的必要大小。这是我一直遇到的难题 - 要滚动，我必须在小内容案例中修复大小，或者在自动调整大小时，我会丢失滚动。【参考方案2】：不完全确定我理解这个问题，但如果你想在列表上滚动而不是在标题上，你试过了吗：
overflow-y:scroll;
在“滚动”div而不是
overflow:auto?
告诉我
【讨论】：
是的。试过了。问题更多的是 DIV.scroll 的容器（DIV.wrap 和 DIV.sizer）的高度将放大以适应 DIV.scroll 导致溢出不会被触发。或者，当我固定其中一个容器的高度时，它们就会变得固定，并且当内容小于 DIV.panel 时高度不会降低 你不能给 .scroll 中的 div 一个高度，因此会触发溢出吗？例如 .scroll div 高度：20px; line-height:20px 还是必须对 div 中的内容完全动态？ 也试过了。 .scroll 得到它的全高，因此被父母的溢出剪裁：隐藏。这就像 max-height on scroll 被忽略了。以上是关于基于 CSS DIV 的表格，带有标题和有限高度，必要时显示滚动条 - 百分比高度的主要内容，如果未能解决你的问题，请参考以下文章
如何使 HTML 面向列和基于 div 的表格的高度在反应中相同