0

现在这可能非常简单，但我是 HTML/CSS 的新手，无法弄清楚。这是HTML：

<html>
    <body>
        <table>
            <tr>
                <td style="width: 275px;background: gray;overflow: scroll">
                    <div style="height: 1000px;width: 250px; background: green;" />
                </td>
                <td style="width: 620px;background: yellow;">
                    def
                </td>
            </tr>
        </table>
    </body>
</html>

和CSS：

html,body,table
{
    height: 100%;
    max-height: 500px;
}

我想要的是让这张桌子伸展到整页高度；如果左侧单元格的内容大于整个页面高度，则左侧单元格中应出现一个简单的滚动条，让用户滚动浏览它们。但相反，我的代码使整个表格变大，内部滚动条似乎永远无法工作。

4

1 回答 1

-2

稍微改变一下你的样式：

<td style="width: 275px;background: gray;overflow: scroll; height: 100%">
   <div style="height: 100%;width: 250px; background: green;float: left" id="test" />
</td>
<td style="width: 620px;background: yellow;">
   def
</td>

并删除max-height评论中提到的@Allan Kimmer Jensen

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

工作示例

更新

将 ID 添加到 div 和一些 javascript：

<script type="text/javascript">
        function elementHeight(element) {
            var height = 0;
            var body = window.document.body;
            if (window.innerHeight) {
                height = window.innerHeight;
            } else if (body.parentElement.clientHeight) {
                height = body.parentElement.clientHeight;
            } else if (body && body.clientHeight) {
                height = body.clientHeight;
            }
            document.getElementById(element).style.height = height + "px";
        }
        elementHeight('test');
</script>

更新的小提琴

于 2013-01-28T09:35:47.103 回答