Question

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

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

（表格高度：100％不起作用，因为没有设置div的高度）

更新：我需要支持IE6,7,8，因此这些浏览器应该理解css建议。

Answer 1

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

非常脏的解决方法：将display:table添加到表格的div和display:table-row-group。不要期待太多......：）

Answer 2

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

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

Answer 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>

Answer 4

坏消息，你不能。他们有很多黑客攻击，但没有一个是好的解决方案。所描述的Javascript是实现它的唯一方法，但是它会占用大量带宽，但是如果您计划将jQuery用于其他功能则很有用。

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

如果真的很重要，可以使用最小的表格。当它适用于几乎所有桌面浏览器时，不要让别人告诉你这是错误的，即使移动浏览器工作得很好，只要它们不嵌套不超过两层。

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

Answer 5

表格高度为100％应填充其父div容器中可用的任何空间。如果您无法在父div上设置高度，请尝试在表上使用height="100%"而不是CSS。我知道，它在语义上并不正确，但有时候表格对div有点古怪。

如果没有设置div高度，如何使html表高度=父div的高度

5 个答案: