让表格在 td 中填充 100% 高度

Question

我正在尝试用正确的 HTML 重写网站。我要替换的网站一团糟。我遇到了一个问题，我无法获得 <table> 来填充 <td> 的高度，它包含在其中。我试过设置 height: 100% 在 <table> 上，基于 google 和 stackoverflow 的研究应该可行，但我一定遗漏了一些愚蠢的东西。在切换到表格之前，我曾尝试用 <divs> 做同样的事情，但我不反对回到 <divs> 如果有人可以建议如何去做。

我正在开发的内容目前在这里： http://96.0.22.228/

由于项目时间限制，我不得不使用糟糕的技巧来使页面看起来正确。我没有声明 <doctype> 并且我强制 IE 使用 IE7-quirks 模式。我很乐意就如何使用 HTML5 和 CSS 以正确的方式进行此布局提出建议。它不必支持较旧的浏览器，但在最新版本的 Chrome、Firefox 和 IE 中看起来必须相同。我还想去掉菜单的图像，并在 CSS 中为边框和菜单文本设置所有样式。

尽管我必须按原样完成网站，但如果这个问题有好的答案，我愿意稍后回去修复它。

原文由 TheDavidFactor 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

表格单元格中的 100% 高度总是很痛苦。从技术上讲，TD 没有高度（因为这取决于它的内容）。您要求浏览器做的是使子项成为其父项的 100%，即其子项的 100%，即其父项的 100%…您可以看到这可能是一个问题。

您可以尝试向 TD 添加一个显式高度并在表格上使用 table-layout:fixed 。至少这样浏览器就知道父级的高度而不需要子级的高度，但这仍然可能行不通。

您可能需要重新考虑如何处理此问题。

原文由 SpliFF 发布，翻译遵循 CC BY-SA 3.0 许可协议