如何在表格单元格内设置 100% div 的高度答案

【问题标题】：How to set 100% height of div inside table cell如何在表格单元格内设置 100% div 的高度
【发布时间】：2017-12-24 01:59:21
【问题描述】：

我试图在表格单元格中获取一个 div 以填充表格单元格的整个高度。 div 是一个“包装器”div (bookWrapper)，里面有 3 个其他 div。我需要包装 div 内的页脚 div (bookNavLinks) 贴在底部。我尝试将高度设置为 100% 和相对位置。 bookNavLinks 位置设置为绝对和底部 0；

<div id="bookWrapper" style="height:100%; border:1px solid #000; position:relative;">

<div id="bookNavLinks" style="padding: 20px 20px 0px 20px; position:absolute; bottom:0">

https://jsfiddle.net/5zg4h95o/3/

【问题讨论】：

您使用表格来实现设计布局的任何特殊原因？远非最好的做事方式
添加到@Tik 的评论中，如果您有任何追求前端开发的认真愿望，我强烈建议您不要使用表格进行布局和内联css 方法
我完全同意这两个 cmets。但是，我们不知道最终用途……如果是用于 HTML 电子邮件，表格布局往往会在各种email clients 中更一致地呈现。

标签： html css

【解决方案1】：

Demo - codepen

Here's another relevant SO answer

看来您需要为<table> 标签添加高度。

<table style="border-collapse: collapse; height:100%">

【讨论】：

【解决方案2】：

只是添加到@Joe B. 的评论中。

我使用height: 1px，而不是height: 100%。因为当我没有足够的行时，表格会 100% 延伸。

【讨论】：