Javascript pour déterminer table largeur/hauteur

J'ai un peu de JavaScript (je suis en train d'utiliser pour définir ma table largeur/hauteur pour le rendre fluide à travers les différentes résolutions. Il semble bien fonctionner pour la largeur mais je n'arrive pas à travailler pour la hauteur. C'est le choix d'un nombre dans la variable correct, c'est juste de ne pas définir les tables de hauteur. Voici ce que j'ai reçu..

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

Quelqu'un voit ce que je fais mal?

OriginalL'auteur cream | 2012-08-11

  1. 1

    Essayer ce peut ce travail

        var width = document.getElementById('container').style.offsetWidth;
var height = document.getElementById('container').style.offsetheight;
    si la Table n'ont pas de n'importe quel style utiliser directement ------------->var largeur = document.getElementById ("TableID').offsetWidth;

    OriginalL'auteur sejal patel

  2. 2

    Pourquoi ne pas simplement utiliser les CSS?

    #container {
width: 70%;
height: 74%;
}
    bonne question. je sais que je parais comme un fou personne le faisant de cette façon mais il y a une raison. c'est juste plus facile de ne pas aller dans des détails inutiles.
    Parce qu'aujourd'hui, chaque jour, une nouvelle technologie ajoute... en fait nous n'avons pas de temps libre pour faire beaucoup de médias css ou conditions d'importation avec de terribles proportions des codes qui ne sont pas compatibles avec tous les navigateurs... au moins je suis sûr que tous les appareils ont le javascript, même dans les mobiles et les tablettes.

    OriginalL'auteur Blender

  3. 2

    Comme il s'avère, il n'y a rien de mal avec le Javascript. Je ne savais pas que vous ne pouvez pas mettre l'attribut hauteur dans le <table> élément, il faut aller dans les <td> élément.

    Je confirme, PhoneGap, un tableau simple avec hauteur=100% n'est pas la taille de la dimension de l'écran, en HTML, en CSS, à l'intérieur ou à l'extérieur d'un DIV, etc...

    Ma solution inspirer par ce post: j'ai calculer la hauteur de la table par la hauteur du corps et de distribuer des pixels pour chacun de mes table de la dimension.

    /* ce code est documenté avant de, fonctionne bien et est ici juste pour compléter la présentation */

    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;

    Dans mon cas, les 2 cellules par ligne, 3 lignes dans la table, de sorte que la hauteur est de 33% de la hauteur de la table.

    OriginalL'auteur cream

  4. 0

    Travail code javascript est

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

    Vous pouvez vérifier violon démo

    OriginalL'auteur code-jaff