Question

我有一个div应该是基于百分比的高度。它包含一个表，当窗口太短时，div应该有一个滚动条来查看表的内容。它在Chrome中看起来是正确的，但在IE和FF中，div的最小高度是它所包含的表的高度。

这是一个jsfiddle： http://jsfiddle.net/Y8Xyb/

这是html：

<div class="outerDiv">
    <table class="outerTable">
        <tr>
            <td class="header">Title
                <table class="innerTable">
                    <tr>
                        <td class="data">User info</td>
                    </tr>
                    <tr>
                        <td class="data">User info</td>
                    </tr>
                    <tr>
                        <td class="data">User info</td>
                    </tr>
                    <tr>
                        <td class="data">User info</td>
                    </tr>
                    <tr>
                        <td class="data">User info</td>
                    </tr>
                    <tr>
                        <td class="data">User info</td>
                    </tr>
                    <tr>
                        <td class="data">User info</td>
                    </tr>
                    <tr>
                        <td class="data">User info</td>
                    </tr>
                    <tr>
                        <td class="data">User info</td>
                    </tr>
                    <tr>
                        <td class="data">User info</td>
                    </tr>
                    <tr>
                        <td class="data">User info</td>
                    </tr>
                    <tr>
                        <td class="data">User info</td>
                    </tr>
                    <tr>
                        <td class="data">User info</td>
                    </tr>
                    <tr>
                        <td class="data">User info</td>
                    </tr>
                    <tr>
                        <td class="data">User info</td>
                    </tr>
                    <tr>
                        <td class="data">User info</td>
                    </tr>
                    <tr>
                        <td class="data">User info</td>
                    </tr>
                    <tr>
                        <td class="data">User info</td>
                    </tr>
                    <tr>
                        <td class="data">User info</td>
                    </tr>
                    <tr>
                        <td class="data">User info</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>

这是css：

 .outerDiv{
   border: thin solid black;
   height:90%;
   overflow:scroll;
 }

回复下面发布的人，即使在添加

之后

的HTML，身体{ 高度：100％; }

div仍然占用IE和FF中表的全部高度。

Answer 1

这是一个经典问题 - 高度基本上是文档的90％，文档比窗口高很多。此解决方案通常有效 - 将文档设置为窗口see it working on JSFiddle的高度：

html, body {
    height: 100%;
    margin: 0;
}

 .outerDiv{
    border: thin solid black;
    height: 90%;
    overflow: auto;
}

Answer 2

您需要添加css来设置hmtl和body代码以消耗100％的页面高度，以便引用父容器的视口：

<强> CSS：

html, body {
    height: 100%;
}

更新了 JSFiddle

Answer 3

对我来说，在Chrome和FF中看起来完全一样，并按我的预期渲染。当你给出90％的高度时，它会查找其父级的高度，因此它可以计算出它的高度。在您的情况下，父文件是没有固定高度的HTML文档，因此浏览器无法计算该高度的90％

overflow：在for和ff中滚动不适用于包含table的div

3 个答案: