Question

我有这个：

<div style="position:absolute;top:275px;right:0px;left:0px;bottom:84px;padding:10px;">
    <table border="1" style="width:100%;height:100%;">
        <tr>
            <th style="height:16px;width:50%;">Version notes</th>
            <th style="height:16px;width:50%;">Instructions</th>
        </tr>
        <tr>
            <td>
                <div style="overflow-y:scroll;overflow-x:hidden;height:100%;">
                    <div style="padding:16px;word-wrap:break-word;">
                        TEXT
                    </div>
                </div>
            </td>
            <td>
                <div style="overflow-y:scroll;overflow-x:hidden;height:100%;">
                    <div style="padding:16px;word-wrap:break-word;">
                        TEXT
                    </div>
                </div>
            </td>
        </tr>
    </table>
</div>

所以基本上我在div里面有一个表格，其中有一个标题行，第二行有2个单元格，其中包含应该有滚动条的div，因为TEXT太大而无法放入内部。它工作得很完美，看起来就像我想要的那样，只要TEXT适合，但是如果它没有表只是伸展自己并且比包含它的div更大。如果我给单元格内的div一个固定的高度：

<div style="overflow-y:scroll;overflow-x:hidden;height:500px;">
    <div style="padding:16px;word-wrap:break-word;">
        TEXT
    </div>
</div>

它会创建滚动条并按照它应该滚动，但是我希望它具有表格单元格的大小，那么如何使其填充整个表格单元格但是避免拉伸整个表格？

Answer 1

您需要在div上指定包含table。

的高度

修改根据MDN：

<percentage>是根据包含块的高度计算的。如果未明确指定包含块的高度，则值计算为auto。根元素的百分比高度（例如<html>）相对于视口。

因此，如果要使用百分比高度，则需要确保其所有父级（直到一个父级具有固定高度）具有非自动高度。

？<table> </table>的奇怪行为

1 个答案: