Question

请查看此代码示例：http://jsfiddle.net/Voga/e6kB8/1/

如果只有4＆＃34; A＆＃34; div和table很好地填充整个屏幕。

现在当我添加更多＆＃34; A＆＃34;字符，表变得越来越大。我希望表高度保持不变，但DIV在包含太多行时会得到滚动条。我尝试了一切，但找不到解决方案。

有人能帮助我吗？

HTML：

<table>
    <tr class="small">
        <td>test1</td>
    </tr>
    <tr class="small">
        <td>test2</td>
    </tr>
    <tr>
        <td>
            <div class="scroll">
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                ...
            </div>
        </td>
    </tr>
</table>

CSS：

body, html{
    height:100%;
    width:100%;
}

.small{
    height:20px;
}

table{
    height:100%;
    width:100%;
    border-style:solid;
    border-width:2px;
}

td{
    border-style:solid;
    border-width:3px;
}

tr{
    vertical-align:top;
}

div{
    border-style:solid;
    border-width:5px;
    width:100%;
    overflow:scroll;
    height:100%;
    max-height:100%;
    display:table;
}

Answer 1

尝试从display:table;删除div，它对我有用：

div{
    border-style:solid;
    border-width:5px;
    width:100%;
    overflow:auto;
    height:100%;
    max-height:100%;
    display:table;
}

此外，如果您将overflow:scroll更改为overflow:auto，那么当您只有几个元素时，它会删除无用的滚动...

JSFiddle Demo

Div使表更大而不是滚动条

1 个答案: