Obtenir une table pour remplir 100% de la hauteur dans un td
Je suis en train de réécrire un site en HTML approprié. Le site que je suis en train de remplacer était un désordre complet. J'ai couru dans un problème où je ne peux pas obtenir un <table>
pour remplir la hauteur de la <td>
c'est contenue dans. J'ai essayé de réglage height: 100%
sur le <table>
, qui est basée sur google et stackoverflow de recherche devrait fonctionner, mais je doit manquer quelque chose de stupide. J'avais essayé de faire la même chose avec <divs>
avant de passer à table, mais je ne suis pas opposé à un retour aux <divs>
si quelqu'un peut suggérer comment le faire.
Le contenu, je suis en développement est actuellement ici: http://96.0.22.228/
En raison du projet, des contraintes de temps, j'ai eu à utiliser de mauvaises hacks pour obtenir les pages à la recherche correctement. Je ne suis pas la déclaration d'une <doctype>
et je suis forcer à-dire à utiliser IE7-en mode quirks. J'aimerais avoir des recommandations sur la façon de faire cette mise en page d'une manière appropriée à l'aide de HTML5 et CSS. Il n'a pas à soutenir les anciens navigateurs, mais il a le même aspect dans les dernières versions de Chrome, Firefox et IE. Je tiens également à faire disparaître les images pour les menus et le style tout en CSS pour les cadres de la frontière et le texte de menu.
Même si j'ai eu à remplir le site, je suis ouverte à un retour et à le corriger plus tard si il y a une bonne réponse à ce problème.
abosolutely, cependant j'ai eu d'autres problèmes avec des divs en essayant d'obtenir le flash de l'objet dans le milieu de la ligne correctement. Si vous pouviez me donner quelques suggestions comme une réponse, je serais heureux de l'essayer.
Il est tout à fait un peu de très chargée, opiniâtre débat qui s'est poursuivi pendant un certain temps sur les mises en page css. Voici un exemple, le exagérée titre: matthewjamestaylor.com/blog/perfect-3-column.htm Donc, j'aime inventer mes mises en page moi-même, et d'apprendre ce qui se passe réellement dans le rendu, et les différences de navigateurs qui provoque des problèmes. C'est mieux pour mon propre apprentissage. Permettez-moi de projet et à le présenter comme une réponse à bien votre défi spécifique. Je vais utiliser une couleur de div avec une taille fixe à la place de l'objet flash.
Vous pouvez aussi essayer ceci: net.tutsplus.com/articles/news/everything-you-know-is-wrong
Cochez cette réponse (td hauteur de 100% et table à hauteur de 100% ) stackoverflow.com/questions/18488148/...
OriginalL'auteur TheDavidFactor | 2012-03-26
Vous devez vous connecter pour publier un commentaire.
100% de la hauteur dans une cellule de tableau est toujours une douleur. Techniquement parlant, un TD n'a pas de hauteur (car cela dépend de son contenu). Ce que vous demandez au navigateur de faire est de rendre l'enfant à 100% de son parent, qui est de 100% de son enfant, qui est de 100% de son parent ... Vous pouvez voir comment cela pourrait être un problème.
Vous pourriez essayer d'ajouter explicitement la hauteur de la TD et de l'aide de la table-layout:fixe sur la table. Au moins de cette façon, le navigateur sait la hauteur de la mère sans avoir besoin de la hauteur de l'enfant, mais qui ne peuvent toujours pas travailler.
Vous pourriez avoir besoin de repenser la façon dont vous aller à ce sujet.
Je vous suggère de ne correspondant pas à la hauteur de menu pour le contenu. Tout ce qui permettra de faire est de provoquer les boutons pour modifier la taille de la page à page, vous donnant incohérent de navigation.
Les boutons doivent rester à la même hauteur, mais il doit y avoir d'espace vide en bas du menu, de sorte que les deux barre de contour continue pour le reste de la hauteur. voici une page du site, je suis à la réécriture comme un exemple: crabcay.com/spa_resort/index.asp BTW, merci de prendre le temps de discuter de cela.
OriginalL'auteur SpliFF
j'ai une solution si vous avez besoin d'obtenir les résultats souhaités, vous pouvez régler le remplissage de votre (td.la navigation d'une classe lien) grâce à cela, vous recevrez vos résultats.
appliquer ce css:-
OriginalL'auteur Shailender Arora
De sorte qu'il est fait ici avec des divs, positionnement absolu en %, et voici la partie que vous n'aimez pas, avec une hauteur définie en pixels. Le problème est que, si vous utilisez des cellules de tableau (td) td de ne pas avoir la hauteur, et donc n'importe quel élément à l'intérieur d'calculera 0 à 100% de la hauteur.
Lorsque nous utilisons des div à l', le problème est différent. Nous pouvons faire en sorte qu'ils conservent leur propriété de hauteur, mais il n'y a aucun moyen de dire à la div sur la gauche, "être à la même hauteur que la div dans le centre." Au moins aucun que je connaisse. Cela étant dit, il semble que votre objet flash est le plus grand chose, et vous pouvez facilement régler la hauteur de tous les trois div est à un joli pixel parfait montant. Puis étirer la ul liste de navigation à la hauteur de 100% de la div c'est imbriquée à l'intérieur.
Il y a une autre façon de faire, qui pourraient mieux répondre à vos besoins, je vais détailler tout en bas.
L'autre option que vous avez est d'envelopper les trois colonnes dans un div conteneur, et de définir une hauteur pour que la div, puis étirer chacune des colonnes à 100% de la hauteur à l'intérieur de ce conteneur div.
OriginalL'auteur Costa
La meilleure solution pour cela est d'avoir l'élément parent de l'
button
ont une hauteur de 100% ainsi, en supposant que vous voulez que votre bouton pour avoir une hauteur de 100%.e.g
CSS:
Qui devrait fonctionner correctement
OriginalL'auteur Pila