Détermination de la hauteur d'un tableau HTML rempli dynamiquement

Question

Je voudrais dessiner un diagramme en HTML. La structure de positionnement ressemble à ceci:

<div id='hostDiv'> 
    <div id='backgroundDiv'> 
    ... drawing the background ... 
    </div> 
    <div id='foregroundDiv' style='position: absolute;'> 
    ... drawing the foreground ... 
    </div> 
    </div> 

Le premier plan contient un élément de tableau qui est dynamiquement peuplé avec du texte, d'où les hauteurs de ligne pourrait modifier en fonction de la quantité de texte allant dans une cellule. Comment puis-je prédire la hauteur finale de l'élément Table dans le pré-gramme? J'ai besoin de cette information pour définir la bonne hauteur de l'arrière-plan. Y at-il un moyen de pré-rendre la table de Javascript et lire sa hauteur? Ou un autre truc?

PS. La taille de hostDiv peut varier en fonction du redimensionnement du navigateur.

Answer 1

Il n'y a aucun moyen de prédire la hauteur sans la rendre dans le navigateur cible.

Une fois que vous faites cela, vous pouvez utiliser (par exemple) jQuery pour obtenir la hauteur de l'élément:

var height = $('#myTable').height(); 

Answer 2

Tout en utilisant jquery, vous pouvez réellement trouver la hauteur de la table avant il est rendu à l'utilisateur. Utilisez une construction comme celui-ci (le code généreusement emprunt de la personne au-dessus de moi):

$(document).ready(function() { var height = $('#myTable').height(); }); 

Answer 3

Vous ne pouvez pas prédire la hauteur totale de l'élément jusqu'à ce que la charge que le navigateur rendu et des éléments de position en fonction des éléments adjacents et la taille de la fenêtre de visualisation.

Cela dit, vous pouvez utiliser la plupart des bibliothèques js pour trouver ce que vous cherchez. Dans Prototype, il est:

$('navlist-main').offsetHeight 

Cela récursive ajouter la hauteur rendu (pas seulement la hauteur de style) pour chaque élément enfant et une marge associée et le rembourrage et retourner un chiffre précis pour la hauteur de l'élément.

Answer 4

Si vous ne voulez tout simplement pas afficher la table avant de redimensionner la div foregorund:
Définissez style.visibility = "hidden" sur la table. Contrairement à display: none, cela ne supprime pas la div du flux de documents et donc la div foreground sera toujours correctement dimensionnée (la table ne sera simplement pas visible). Bien sûr, si cela est acceptable, vous pouvez déplacer foreDiv en arrière-planDiv et supprimer le positionnement absolu. backgroundDiv sera ensuite automatiquement redimensionné pour contenir foregroundDiv (et la table).

Answer 5

Je pense que vous pouvez utiliser l'un des attributs DOM: clientHeight, offsetHeight et scrollHeight tel que défini dans w3 here

Ceci est l'utilisation de clientHeight:

document.getElementById("#Table").clientHeight; 
document.getElementById("#Table").clientWidth;