Css 如何将表格拉伸到整页高度_Css_Html_Scroll

Css 如何将表格拉伸到整页高度

css html scroll

Css 如何将表格拉伸到整页高度,css,html,scroll,Css,Html,Scroll,现在这可能非常简单，但我对HTML/CSS还不熟悉，无法理解。以下是HTML： <html> <body> <table> <tr> <td style="width: 275px;background: gray;overflow: scroll"> <div style="height: 1000px;wid

现在这可能非常简单，但我对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>

我想要的是让这张桌子伸展到整页的高度；如果左侧单元格的内容大于整页高度，则应在左侧单元格中显示一个简单的滚动条，以便用户滚动浏览。但是，我的代码会使整个表格变大，而内部滚动条似乎永远不会工作。

稍微更改一下您的样式：

<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>

更新

将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>


功能元素高度（元素）{
var高度=0；
var body=window.document.body；
if（窗内高度）{
高度=窗内高度；
}else if（body.parentElement.clientHeight）{
高度=body.parentElement.clientHeight；
}else if（body和body.clientHeight）{
高度=车身高度；
}
document.getElementById（element）.style.height=height+“px”；
}
元素高度（“测试”）；

您是否知道您的页面和表格的最大高度为：500px？谢谢。但主要的问题是，左侧td中的div是任意大小的，所以我不能将其高度设置为100%。这实际上是一个树视图，它将有大量的数据，我不希望整个表增长那么大。我不认为你可以通过css实现这一点，因为你希望div是100%的屏幕高度和溢出。使用javascript获取屏幕高度并将其设置为该div。我愿意这样做。你能举个例子吗？对不起，我对这个网络世界有点陌生。在我的WinForms和WPF/SL世界中，这很容易做到。你想用javascript还是jQuery来实现？非常感谢。这真的很接近我需要的。

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

<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>