我为什么不 <div> 我告诉它用javascript调整大小？

Question

我有一个包含表的<div>元素，我想将其调整为最大视口高度-70 px。 原因是我希望页眉保留在一个位置，并且表格独立滚动。 我不能为此使用iframe，因为有复杂的javascript与表格进行交互。 因此，我必须使用<div>并将其溢出值设置为滚动。 我的问题是，当我告诉它时，容器不会调整大小。 容器看起来像这样：

<div class="tableContainer" id="tblCont">
  <table width="100%" border="0" cellpadding="0" cellspacing="0" id="mainTbl" class="mainTable">
    <tr class="row_a" id="1">
      <td>id: 1</td>
    </tr>
  </table>
</div>

我的tableContainer类的CSS如下：

.tableContainer
{
    overflow: scroll;
    /*height: 400px;  -- this was just to see if the concept works - and this seems to work fine */
}

最后，这是应该设置表格容器高度的javascript：

<script type="text/javascript">
    var tbc = document.getElementById("tblCont");
    var h = Math.round((window.innerHeight)-(70))+"px";
    tbc.style.height = h;
</script>

我什至尝试用

tbc.style.height = "50px";

但这也不起作用。

有任何想法吗？

Answer 1

在DOM元素存在之前就已调用了脚本。 您需要使用onload事件处理程序调用脚本，并将脚本放入函数中：

<script type="text/javascript">
    function setHeight() {
        var tbc = document.getElementById("tblCont");
        var h = Math.round((window.innerHeight)-(70))+"px";
        tbc.style.height = h;
    }
</script>

<body onload="setHeight()">
....

Answer 2

我认为JavaScript不会被执行。 我将其包装在一个init函数中，并且可以正常工作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>Test</title>
        <style type="text/css">
            .tableContainer
            {
                overflow: scroll;
                /*height: 400px;  -- this was just to see if the concept works - and this seems to work fine */
            }
        </style>
        <script type="text/javascript">
            function init()
            {
                var tbc = document.getElementById("tblCont");
                var h = Math.round((window.innerHeight)-(70))+"px";

                document.getElementById('test').onclick = function()
                {
                    tbc.style.width = "40px";
                }
            }

            window.onload = init;
        </script>
    </head>

    <body>
        <form>
            <input id="test" type="button" value="test" />
        </form>

        <div class="tableContainer" id="tblCont">
          <table width="100%" border="0" cellpadding="0" cellspacing="0" id="mainTbl" class="mainTable">
            <tr class="row_a" id="1">
              <td>id: 1</td>
            </tr>
          </table>
        </div>
    </body>
</html>

Answer 3

尝试两件事：

首先，如果还没有，请注释掉var h行，然后手动设置高度：

<script type="text/javascript">
    var tbc = document.getElementById("tblCont");
    //var h = Math.round((window.innerHeight)-(70))+"px";
    tbc.style.height = "50px";
</script>

其次，尝试警告h变量而不是设置高度：

<script type="text/javascript">
    var tbc = document.getElementById("tblCont");
    var h = Math.round((window.innerHeight)-(70))+"px";
    alert(h);
    //tbc.style.height = "50px";
</script>

我的猜测是问题在于h的设置方式，然后将其杀死。

Answer 4

我强烈建议您查看第三方Grid解决方案，例如Dojo工具包中的Data Grid 。
从经验来看，我可以说在DHTML中从头开始构建功能强大的数据网格非常困难，并且使其与浏览器兼容也很有趣。

我为什么不 <div> 我告诉它用javascript调整大小？

问题描述

4 个解决方案

解决方案1
3 2009-11-19 19:11:15

解决方案2
0 2009-11-19 19:11:12

解决方案3
0 2009-11-19 19:11:53

解决方案4
0 2009-11-19 19:12:49

我为什么不 <div> 我告诉它用javascript调整大小？

问题描述

4 个解决方案

解决方案1 3 2009-11-19 19:11:15

解决方案2 0 2009-11-19 19:11:12

解决方案3 0 2009-11-19 19:11:53

解决方案4 0 2009-11-19 19:12:49

解决方案1
3 2009-11-19 19:11:15

解决方案2
0 2009-11-19 19:11:12

解决方案3
0 2009-11-19 19:11:53

解决方案4
0 2009-11-19 19:12:49