100% td 内的 100% 高度 div答案

【问题标题】：100% height div inside 100% td100% td 内的 100% 高度 div
【发布时间】：2010-12-23 08:52:09
【问题描述】：

好的，所以这是我的问题......它让我困扰了一段时间...... 我需要在此 TD 内设置以下 DIV 100% 高度而没有任何副作用（我的意思是滚动），因为由于某种未知原因，当我将其设置为 100% 高度时，看起来 IE 8 做了一些错误的计算。 . 我尝试了很多组合但没有成功.. 需要过渡文档类型... 提前感谢您的帮助！

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style>
html, body
{
    height:100%;
    margin:0px;
    padding:0px;
}
</style>
<head>
    <body>
        <table style="height:100%" border="1">
            <tr>
                <td>TOP</td>
            </tr>
            <tr style="height:100%">
                <td style="height:100%">
                    <div style="border:1px dotted blue; height:100%">CONTENT</div>
                </td>
            </tr>
        </table>
    </body>
</html>

【问题讨论】：

...您是否使用表格来布局非表格数据？ ...
@jball：伙计，我很久以前就停止了这场战斗。战斗实在是太难了。此外，标题样式和内联样式的混合也有点令人不安。
好吧，伙计们，我没有选择它的旧布局，我需要那个 div 100% 高度，我现在不能删除表格..
@jball: 随意更改另一个表格的 div，错误是任何元素的 100% 高度，div 仅用于演示目的
@Brizio 我去过那里，在打破限制的情况下工作。您可能想尝试向要求您添加 doctype 行的人指出此任务与保留现有表格进行布局的要求不一致。

标签： html

【解决方案1】：

div 上的边框在高度“外部”...所以实际上，您应用的样式是 100% + 2px 的高度（1px 上边框，1px 下边框）...

如果删除边框，真实高度将为 100%，滚动条应消失 :)

如下所述，底部单元格中的 height:100% 使总表格高度 = 第一行高度 + 底部行高的 100%。

更新：好的，所以它不漂亮，但它是我所拥有的最好的：

如果您要为 div 提供 blah 的 id 并使用以下 jquery 将 div 的高度修改为它的父项的高度......但这确实需要为第一行/单元格定义高度。 . 我以 100px 为例。

$('#blah').height($('#blah').parent().height());

jsfiddle 示例...http://jsfiddle.net/Damien_at_SF/vwcvN/

【讨论】：

边框仅用于定位，使用该代码创建一个 html 文档，您将在 IE8 上看到它，确切的滚动大小是 TOP TD 高度
是的，因为 height:100% 在底行的单元格中。表格的总高度为第一行高+第二行高。因为第二行高度是 100%，所以总高度是第一行高度 + 100%
我已经知道了，但我想要的是底部单元格/行使用第一行剩下的剩余高度
只是为了测试，如果你删除 doctype 行，一切正常......但不幸的是，这是我的工作，把那该死的行放进去 =/
当我删除 doctype 行时，它仍然损坏：S

【解决方案2】：

您应该了解一下 CSS 盒子模型的基础。例如：http://www.w3.org/TR/CSS21/box.html

【讨论】：