0

コンテンツ管理システム内にあるダッシュボードがあります。3 つのフレームが最初の列と 3 つの別々の行を占めるように、テーブルに配置された 4 つの iframe があります。4 番目のフレームは 2 列目にあり、3 行すべてにまたがっています。Javascript はウィンドウのサイズを取得し、フレームのサイズを変更します onload() および onresize()。小さなサイズのウィンドウでは、左側の列にある 3 つのフレームはすべて、目に見えるスペースがあるにもかかわらず、高さが 0.5 インチのサイズになっています。

垂直サイジングのスローとは何ですか?どうすれば改善できますか?

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 に答える