Question

我需要在表格单元格中放置一个可滚动的div。桌子应该是100％的高度。 div有很多内容不适合屏幕，所以应该出现滚动。但我只希望 div 可滚动，而不是整页如果我不使用桌子，一切都很完美：

<div style="height: 100%; width: 100px; padding: 5px; overflow: auto; border-width: 1px;  border-style: solid;">
    <div>
       Item 1<br/>
       Item 2<br/>
       ...
       Item 300<br/>
    </div>
</div>

Div是可滚动的，页面没有滚动条。但如果把它包在一张桌子里：

<table style="height: 100%">
    <tr>
        <td>
            <div style="height: 100%; width: 100px; padding: 5px; overflow: auto; border-width: 1px;
                border-style: solid;">
                <div>
                   Item 1<br/>
                   Item 2<br/>
                   ...
                   Item 300<br/>
                </div>
            </div>
        </td>
    </tr>
</table>

页面变得可滚动，而div不再是这样的。我该怎么办？

Answer 1

height: 100%;上不应该是overflow: auto;和<td>吗？

Answer 2

我认为你的主要问题是你不能指望div达到100％的高度，因为持有它的表的宽度也是％。

div的容器必须具有绝对高度。

这是我的代码：

<table height="2000px">
    <tr>
        <td>
            <div style="height: 100%; width: 100px; padding: 5px; overflow: scroll; border: 1px solid #000;">
                Item 1<br/>
                Item 2<br/>
                ...<br/>
                Item 300<br/>
            </div>
        </td>
    </tr>
</table>

使用div上的滚动条，因为它的高度也会使页面滚动条出现。

不幸的是，除非你使用一些hacky CSS（这可能不适用于所有浏览器），你不能告诉div为100％高度而不给它的容器一个绝对高度，就像我上面所做的那样。

如果我错了，我肯定有人会纠正我，但我试图给div增加100％的高度以适应浏览器窗口，而不需要CSS或Javascript黑客并且失败。

Answer 3

表实际上使用的是最小高度，所以每当你的div变得比你想要的大时，table列实际上只是调整大小以适合你的div，所以你的div百分比变得无用。

你需要使用div而不是表格。

Answer 4

您应该将table-layout css属性更改为“fixed”值。

<table style="table-layout: fixed; width: 100%;">
    <tr>
        <td>
            <div style="overflow: scroll;">
                Scrollable div
            </div>
        </td>
    </tr>
</table>

表格内的可滚动div

4 个答案: