css - 溢出 :scroll not working for div containing table in ie and ff

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;
}