为什么我的
当我告诉它时用 javascript 调整大小？

发布于 2024-08-12 08:19:09 字数 1068 浏览 7 评论 0原文

我有一个包含表格的

元素，我想将其大小调整为最大视口高度 - 70 px。原因是我希望标题保留在一处，而表格独立滚动。我不能为此使用 iframe，因为有复杂的 javascript 与表格交互。因此，我必须使用

并将其溢出值设置为滚动。我的问题是，当我告诉它时，容器不会调整大小。容器看起来像这样：

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

但这也行不通。

有什么想法吗？

原文

I have a <div> element that contains a table, which I want to resize to the maximum viewport height - 70 px. The reason is that I want the header to stay in one place, and the table to scroll independantly. I can't use iframes for that, since there is complicated javascript interacting with the table. I therefore have to use a <div> and set it's overflow value to scroll. My problem is that the container wont resize when I tell it to. The container looks like this:

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

The CSS for my tableContainer class is as follow:

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

Lastly, here is the javascript that is supposed to set the height of the table container:

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

I even tried setting a fixed height with

tbc.style.height = "50px";

but that also does not work.

Any ideas?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

巨坚强 2024-08-19 08:19:09

您的脚本在 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()">
....

Your script is being called before your DOM elements exist. You need to call your script with an onload event handler, and put your script in a function:

<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()">
....

回复收藏 0 原文

洒一地阳光 2024-08-19 08:19:09

我不认为 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>

I don't think the javascript gets excecuted. I wrapped it inside an init function and it works.

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

回复收藏 0 原文

梦里寻她 2024-08-19 08:19:09

尝试两件事：

首先，如果您还没有注释掉 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 如何正在设置，然后杀死它之后的任何东西。

Try two things:

First, if you didn't already, comment out the var h line and then set the height manually:

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

Second, try alerting out the h variable instead of setting the height:

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

My guess is that the problem is with how h is getting set, which is then killing anything after it.

回复收藏 0 原文