6

テーブルの幅/高さを定義してさまざまな解像度で流動的にするために使用しようとしているJavaScriptがいくつかあります。幅は問題ないようですが、高さはうまくいきません。これは、正しい数値を正しい変数に設定しているだけであり、テーブルの高さを設定しているだけではありません。これが私が得たものです。

<html>
<head>
<script type="text/javascript">
 var viewportwidth;
 var viewportheight;
 var tablewidth;
 var tableheight;
 if (typeof window.innerWidth != 'undefined'){ //set's viewport width/height into respective variables
              viewportwidth = window.innerWidth,
              viewportheight = window.innerHeight
         }else if (typeof document.documentElement != 'undefined'
             && typeof document.documentElement.clientWidth !=
             'undefined' && document.documentElement.clientWidth != 0){
               viewportwidth = document.documentElement.clientWidth,
               viewportheight = document.documentElement.clientHeight
         }else{
               viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
               viewportheight = document.getElementsByTagName('body')[0].clientHeight
         } 
 function asdf(){
 tablewidth = Math.round(viewportwidth/100*70);  //sets table width to 70% of viewport width
 tableheight = Math.round(tablewidth/100*74);    //sets table height to 74% of table width, this number is ambigous
 document.getElementById('poop').innerHTML = tableheight+', '+tablewidth+', viewport width is '+viewportwidth+'x'+viewportheight;
 document.getElementById('container').width = tablewidth;
 document.getElementById('container').height = tableheight;
}
</script>
</head>
<body onload="asdf();">
<span id="poop"></span>
    <table id="container" cellpadding="0" border="1" cellspacing="0" width="" height="">
        <tr><td colspan="5"></td></tr>
        <tr>
            <td width="38%"></td>
            <td width="12%"></td>
            <td width="21%"></td>
            <td width="14%"></td>
            <td width="15%"></td>
        </tr>
    </table>
</body>
</html>

誰かが私が間違っているのを見ますか？

4

4 に答える 4

2

CSSを使ってみませんか？

#container {
  width: 70%;
  height: 74%;
}
于 2012-08-11T07:02:17.333 に答える
2

結局のところ、Javascriptには何の問題もありませんでした。<table>要素に高さ属性を入れることができないことに気づきませんでした。要素に入れる必要があり<td>ます。

PhoneGapで、height = 100％の単純なテーブルが画面のサイズに合わないことを確認します。HTML、CSS、DIVの内部または外部など...

私のソリューションはこの投稿に触発されています：私は計算しています身長を介したテーブルの高さで、各テーブルの寸法をピクセル単位で分配します。

/ *このコードは以前に文書化されており、正常に機能し、プレゼンテーションを完了するためだけにここにあります* /

var body = document.body,
    html = document.documentElement;

var height = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );


/* this is a Topcoat navigation bar and I get its height via offsetHeight of the surrounding <div> */
var hTopBar = document.getElementById("pgTopBar").offsetHeight; 

var sH = Math.floor((height - hTopBar) / 3);


document.getElementById("td1").height = sH;
document.getElementById("td2").height = sH;
document.getElementById("td3").height = sH;
document.getElementById("td4").height = sH;
document.getElementById("td5").height = sH;
document.getElementById("td6").height = sH;

私の場合、1行に2セル、テーブルに3行あるため、高さはテーブルの必要な高さの33％になります。

于 2012-08-11T07:06:57.743 に答える
2

これを試してみてください

    var width = document.getElementById('container').style.offsetWidth;
    var height = document.getElementById('container').style.offsetheight;
于 2012-08-11T09:30:02.060 に答える
0

動作するjavascriptコードは

//With small change, which you are missing
document.getElementById('container').style.width = tablewidth+"px";
document.getElementById('container').style.height = tableheight+"px";

あなたはフィドルのデモをチェックすることができます

于 2012-08-11T07:31:58.343 に答える