Edit: supprimé les fichiers du serveur
http://www.jdxsolutions.com/newsite/index.html < BR>
http://www.jdxsolutions.com/newsite/default.css
C'est une mise en page que j'utilise pour essayer des trucs. Ce qui me convient de m'empêcher, c'est que lorsque le navigateur est redimensionné, une barre de défilement verticale apparaît, l'arrière-plan n'atteint pas la vitrine complète de la fenêtre du navigateur ... En fait, ils sont plus courts que le panneau de contenu, malgré la réglée. : 100%.
Cela se produit dans IE8, FF3 et Chrome, il est donc clairement une jolie baise compatible standard (Validation passes pour XHTML 1.0 strict et CSS2.1 +)! Quelqu'un peut-il signaler l'erreur évidente?
Edit: Je l'ai regardé en Firebug comme suggéré. Ce que je trouve, c'est que la page div sonne devant le bas de la société mèreLineLline Div. Comment cela peut-il fonctionner?
4 Réponses :
body { height: 100%; }
this is the height of the browser viewport, not the size of your html page.if you need two background you could create two divs containing the other elements with different background properties
J'ai ajouté de la hauteur en tant que test sur le corps, des balises HTML à tester. Les éliminer ne fait aucune différence.
La hauteur et la largeur des éléments extérieurs correspondent toujours à la fenêtre de navigateur, la balise "corps" n'était qu'un exemple
Définissez la hauteur de votre page dans le corps à un numéro exact, puis 100% pour tout le reste.
plus, il n'y a pas de hauteur ici: p>
#page
{
width: 100%;
text-align: left;
margin-left: auto;
margin-right: auto;
}
Je ne suis pas suivi. Je ne peux pas définir une hauteur sur ma page
Si la page est réglée sur une hauteur de 100% (zone de vue), alors que la fenêtre du navigateur est relative. Une barre de défilement change la hauteur de la zone de vue et votre page est donc définie sur la même valeur qu'il était précédente. Si vous définissez la hauteur supérieure de niveau sur une valeur de 2000px et 100% pour les éléments enfants, vous obtiendrez ce que vous avez besoin.
Fondamentalement, la zone de vue du navigateur change, mais le navigateur ne rafraîchit pas votre page pour afficher la nouvelle valeur lorsque vous utilisez 100%. Utilisez plutôt une valeur et il restera le même.
"une valeur"? Sur lequel div spécifiquement? J'ai téléchargé une version plus récente, toutes les divs ont Name / ID afin de modifier votre message pour spécifier exactement ce que vous changeriez?
HTML, Corps {Hauteur: 1200px; } Il suffit de faire la valeur 100% à une valeur px dans la valeur la plus élevée.
Ne semble pas fonctionner. Pour une chose, je reçois une barre de défilement en tout temps. En outre, alors que cela fonctionne en quelque sorte autrement à FF, pas en chrome.
vous utilisez position: absolu; Cela prend l'élément de «flux normal», ce qui signifie que l'élément n'a plus d'effet sur les boîtes générées par son élément contenant.
de sorte que l'un des enfants sous #PageOutline tombera en dehors du "flux normal" - la seule raison pour laquelle votre page "fonctionne" lorsque vous le visez sans barre de défilement, c'est dans ce scénario la hauteur: 100% correspond à la hauteur de la fenêtre qui se trouve à ce point plus grand que -or égal à la hauteur de l'élément #pageOutline.
Vous aurez peut-être plus de chance avec l'affichage: Inline-Block; et des propriétés flottantes.
Sur lequel divs? Toutes mes tentatives pour faire cette pause totalement.
La réponse courte: c'est compliqué. Pour vraiment comprendre tous les facteurs qui affectent les hauteurs de CSS 100% (et les largeurs), vous devez connaître des termes tels que: le port d'affichage, le bloc contenant initial, le débit, le débit, les contextes de formatage en ligne, les contextes de formatage des blocs, la boîte W3C. Modèle, le mode de boîte IE Boîte et le mode bizarre.
Si vous êtes vraiment intéressé par le départ, il n'y a pas de meilleur endroit pour démarrer que la spécification: le modèle de formatage visuel
Heights sur les éléments en ligne sont calculés différemment de éléments de blocs - d'ici à cela ne fait que référence uniquement aux éléments bloquants ou éléments qui ont reçu de nouveaux contextes de formatage du bloc.
Pour commencer lorsque vous donnez un élément à 100% de hauteur, il faudra sa hauteur de Il contient le blocage par exemple. C'est le parent et son parent prend sa hauteur de son parent et donc de revenir au bloc contenant initial.
Le bloc contenant initial est différent dans HTML (Corps) et XML / XHTML (HTML) et il est par défaut. La hauteur n'est pas 100% de la fenêtre de vue, si normalement que vous couvriez votre bout et définissez-la de cette façon: Nous avons dû zéro la marge et le rembourrage parce que dans CSS la hauteur La propriété fait référence à la hauteur de la boîte de contenu et s'il y avait une marge ou un rembourrage (ou une bordure), nous obtenions une barre de défilement. La hauteur serait 100% + rembourrage + bordure + margin ... Modèle de boîte W3C L'exception à ceci est si c'est-à-dire que c. -a href="http://frf="http://en.wikipedia.org/wiki/Quirks_mode" rel="noreferrer"> Mode Quiks ... Donc, à moins que vous ne le maintiez à moins % hauteur "à travers tous les éléments descendants, vous redéfinissez la signification de" hauteur de 100% "à chaque nouveau descendant. Cela peut également être affecté par la création d'un nouveau contexte de formatage de bloc. Vous créez de nouveaux contextes de formatage de Bock lorsque vous flottez ou positionnez absolument un élément (ainsi que Quelques autres choses ) Les gens demandent souvent "Pourquoi mon div avec 100% de hauteur travaille-t-il dans une table Cellule? ". Cela concerne comment une hauteur d'une cellule de table est calculée. Lorsqu'une cellule est rendue la hauteur de sa boîte de contenu n'est pas étirée pour correspondre à la hauteur de la ligne mère. Le rendu ajoute plutôt un rembourrage supplémentaire selon les besoins afin que la hauteur globale correspond à la hauteur de la rangée. Donc, dans cet exemple ... ... La hauteur de la div est de 100% à 100% de la boîte de contenu de la cellule. La boîte de contenu de la cellule a reçu un rembourrage supplémentaire de manière à ce que celle-ci correspond à la hauteur totale de la rangée. La hauteur de la div est à 100% de la boîte de contenu des parents (pas la hauteur totale). voir Comme cette question semble être posée presque tous les jours, j'ai vérifié la case à cocher wiki - je suis un Newbie mais présumable, cela facilitera la tâche que d'autres de créer des corrections et des ajouts au besoin . À propos de la hauteur des cellules de table ...