0

我有一个位于内容管理系统内的仪表板。它有 4 个 iframe 排列在一个表格中，因此 3 个框架占据第一列和 3 个单独的行。第 4 帧占据第二列并跨越所有三行。Javascript 获取窗口尺寸并调整框架 onload() 和 onresize() 的大小。在一个小窗口上，左列的 3 个框架的大小都为半英寸高，即使它们有可见的空间。

什么是垂直尺寸投掷，我该如何改进它？

请将答案集中在 javascript 上。

    <script type="text/javascript">
    var winW = 1024, winH = 768; //This sets a minimum height and width
    function calcHeight(ifid) {
        getWinH();
        document.getElementById(ifid).height = winH;
    }
    //Cross-browser function to get window height

       var compW = 35;
       var compH = 290;

        function getWinH() {

        if (document.body &amp;&amp; document.body.offsetWidth) {
            winW = document.body.offsetWidth;
            winH = document.body.offsetHeight;
        }
        if (document.compatMode == 'CSS1Compat' &amp;&amp; document.documentElement &amp;&amp; document.documentElement.offsetWidth) {
            winW = document.documentElement.offsetWidth;
            winH = document.documentElement.offsetHeight;
        }
        if (window.innerWidth &amp;&amp; window.innerHeight) {
            winW = window.innerWidth;
            winH = window.innerHeight;
        }
          winW = winW - compW;
          winH = winH - compH;  

    document.getElementById("box1").setAttribute("width", Math.floor(winW * 0.4));
    document.getElementById("box1").setAttribute("height", Math.floor(winH * 0.4));

    document.getElementById("box4").setAttribute("width", Math.floor(winW * 0.6));
    document.getElementById("box4").setAttribute("height", winH + 175); //comps for the titles of other boxes

    document.getElementById("box2").setAttribute("width", Math.floor(winW * 0.4));
    document.getElementById("box2").setAttribute("height", Math.floor(winH * 0.4));

    document.getElementById("box3").setAttribute("width", Math.floor(winW * 0.4));
    document.getElementById("box3").setAttribute("height", Math.floor(winH * 0.4));

    }
    </script>
4

1 回答 1

0

尝试使用样式设置大小：

 var boxes = [document.getElementById("box1"), document.getElementById("box2"), document.getElementById("box3"), document.getElementById("box4")];
boxes[0].style.width = Math.floor(winW * 0.4) + "px";
boxes[0].style.height =  Math.floor(winH * 0.4) + "px"

boxes[3].style.width = Math.floor(winW * 0.6) + "px";
boxes[3].style.height =  (winH + 175) + "px"; //comps for the titles of other boxes

boxes[1].style.width = Math.floor(winW * 0.4) + "px";
boxes[1].style.height = Math.floor(winH * 0.4) + "px";

boxes[2].style.width = Math.floor(winW * 0.4) + "px";
boxes[2].style.height = Matth.floor(winH * 0.4) + "px";
于 2013-01-11T02:09:29.100 回答