未设置 div 高度时如何使 html 表格高度 = 父 div 的高度答案

【问题标题】：How to have html table's height = height of parent div when div's height is not set未设置 div 高度时如何使 html 表格高度 = 父 div 的高度
【发布时间】：2014-12-31 09:12:03
【问题描述】：

我有一个 html 表格，在一个 div 里面。 div 的高度基于 div 中的其他元素。

如何让表格的高度等于其父 div 的高度？

(table height: 100% 不起作用，因为没有设置 div 的高度)

更新：我需要支持 IE6、7、8，所以这些浏览器应该能够理解 css 建议。

【问题讨论】：

为什么父div上不能有高度？
因为如果有人调整字体大小或有更多内容，我不想限制高度。高度应调整以适应内容。

标签： html css

【解决方案1】：

几乎不可能，因为渲染器无法知道 100% 应该是多少。

一个非常肮脏的解决方法：将display:table 添加到div 和display:table-row-group 到表中。不要期望太多…… :)

【讨论】：

在 IE8 中没有任何作用。在 FF 中，它稍微扩大一点，但没有占据全部高度。

【解决方案2】：

尝试使用position:relative和min-height:100%;

Mb 甚至 posinion:absolute、top:xxx、bottom:xxx、right:xxx 和 left:xxx - 定位和 height:auto。

【讨论】：

【解决方案3】：

仅使用 css 来实现您所说的可能非常困难。您可以尝试使用 javascript、jQuery 或任何其他 javascript 库来获取父 div 的高度，然后将其作为高度应用于表格。看看下面的例子。无论添加多少文本，它都会根据父 div 动态设置表格的高度。它不是不显眼的 javascript - 但这应该可以帮助您入门。

<html>
    <head>
        <title>Table Height set via jQuery</title>
        <script src="jquery.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript" charset="utf-8">
            $(document).ready(function(){
                var divHeight = $('div.full').height();
                $('table.column_2').css("height", divHeight + "px");
                $('table.column_2 .parentDiv').text(divHeight);
                var tableHeight = $('table.column_2').height();
                $('table.column_2 .tableHeight').text(tableHeight);
            });
        </script>
        <style type="text/css" media="screen">
            div.full {
                width:960px;
                float:left;
                }
            div.column_1 {
                width:450px;
                padding:0 10px;
                float:left;
                margin-right:10px;
                background-color:#eee;
            }
            table.column_2 {
                width:470px;
                float:left;
                background-color:#ddd;
            }
        </style>
    </head>

    <body>
        <div class="full">
            <div class="column_1">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim 
                    id est laborum.

                </p>

            </div>
            <table class="column_2">
                <thead>
                    <tr>
                        <th>Table Height</th>
                        <th>Parent Div Height</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="tableHeight"></td>
                        <td class="parentDiv"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

【讨论】：

【解决方案4】：

坏消息，你不能。他们有很多技巧，但没有一个是好的解决方案。所描述的 Javascript 是唯一的方法，但它占用太多带宽而不是小事，但如果您计划将 jQuery 用于其他功能，它很有用。

CSS 3 的新规则让您拥有这种灵活性，但许多浏览器并不提供完整的 CSS 3 支持。既然你想要 IE6/7，你就不走运了。

如果它真的那么重要，那么使用最少的表是可以的。不要让其他人告诉你这是错误的，因为它几乎适用于所有桌面浏览器，甚至移动浏览器也可以正常工作，只要它们的嵌套深度不超过两层。

另一种解决方案是创建不依赖于检查其他 DIV 高度的布局设计。

【讨论】：

【解决方案5】：

100% 的表格高度应填满其父 div 容器中的所有可用空间。如果您无法在父级div 上设置高度，请尝试在表格上使用height="100%" 而不是CSS。我知道，这在语义上不正确，但表格有时与 div 有点奇怪。

【讨论】：