动态表格行高，同时忽略单元格中的内容高度
发布于2022-01-27 00:12 阅读(548) 评论(0) 点赞(28) 收藏(5)
我有一个 3 行的表格，固定高度为 500 像素。
第一行的高度可以不同，以适应长度不同的内容。第三行永远不会改变，并且始终具有相同的高度，适合其内容。第二行有一堆会超过单元格高度的内容，超过单元格高度后应该隐藏。这一行的高度应该完全取决于第一行占据了多少。
所以要清楚高度：
- 第 1 行 = x（动态）
- 第 3 行 = y（静态）
- 第 2 行 = 500 - x - y
我找到了一种在 Firefox 中执行此操作的方法，但它在 IE 8 中不起作用。现在我正在使用 javascript 来修复它，但如果这可以纯粹使用 CSS/HTML 来完成，那就太好了。
这是我现在如何工作的基本演绎。
<table cellpadding="0" cellspacing="0" id="table">
<tr><td id="row1">Row 1 Content</td></tr>
<tr><td id="row2"><div>Row 2 Content. Lots more content here should not cause the table to expand.</div></td></tr>
<tr><td id="row3">Row 3 Content</td></tr>
</table>
#table{height:500px;width:200px;}
#row1,#row3{height:1%}
/* ^^ force cell heights to fix content */
#row2{position:relative;height:99%}
/* ^^ a height must be specified to get the absolutely positioned div to assume the cell's height */
#row2 div{position:absolute;height:100%;width:200px;overflow:hidden;top:0;left:0;}
/* ^^ allows content to overflow the cell without causing the cell to expand */
不幸的是，这在 IE 中不起作用。IE 将占用第 2 行的 99% 高度并导致单元格与表格的设置宽度 (500px) 一样高，即使这会导致表格远大于 500%。我会将高度样式保留在行之外，但是其中的 div 不知道要达到什么高度。
目前我使用 jQuery 根据其他单元格的高度来设置中间行的高度，但这不是最佳的。
想法？
谢谢
解决方案
我通过不使用 3 行而是使用 2 行来解决这个问题。第一行是动态的，第二行占用剩余空间，然后将附加内容拆分为一个 div，该 div 附加到单元格的底部。额外的内容只会在 div 下流动。
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/296265/455376ef8ac82c1ba30e/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力