Question

我有一个<div>元素，其中包含一个表格，我希望将其调整为最大视口高度 - 70像素。原因是我希望标题保留在一个地方，并且表格可以独立滚动。我不能使用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

我强烈建议您查看第三方网格解决方案，例如Data Grid中的Dojo toolkit。
根据经验，我可以说在DHTML中从头开始构建功能强大的数据网格是非常困难的，并且使其跨浏览器兼容并不好玩。

当我告诉它时，为什么我的<div>不能用javascript调整大小？</div>

4 个答案: