Question

我希望第一行的高度为屏幕的70％。我在第一行的div中将溢出设置为auto，这样滚动条就不会出现在整个网页上，仅适用于此div。我的解决方案适用于Chrome和IE，但不适用于Firefox：在Firefox上，第一行的大小超过70％。任何解决方案吗？

这是一个JSFiddle：http://jsfiddle.net/4hyCh/

<body>
    <div style="height: 100%;">

        <table style="height: 100%;">
            <tr>
                <td style="height: 70%;">
                    <div class="mainDiv">
                        AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />
                        AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />
                        AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />
                        AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />
                        AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />
                        AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />
                        AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />
                        AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />
                        AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />
                        AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />
                        AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />
                        AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />AAA AAA<br />
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="footerDiv">
                        Copyright some company...
                    </div>
                </td>
            </tr>
        </table>

    </div>
</body>

CSS：

html 
{ 
    height:100%; 
    margin: 0px;
}

body 
{ 
    height:100%; 
    margin: 0px;
    font-family: Verdana;
}

.mainDiv
{
    background-color: #00FF00; 
    height: 100%;
    overflow: auto;
}

.footerDiv
{
    background-color: #FF00FF;
}

Answer 1

找到解决方案：表需要：

<tbody style="height: 100%;">

按百分比设置表格行的高度在Firefox上不起作用。解决方案？

1 个答案: