Est-ce que la barre de défilement appartient à ou ?
J'ai écrit pour chaque fichier html, mais je ne sais pas exactement ce que c'est.
Réponses
Trop de publicités?
Ionuț G. Stan
Points
62482
Étant donné le balisage et le style suivants :
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html {
background: green;
overflow:scroll;
}
body {
background: red;
overflow:scroll;
}
</style>
</head>
<body>
</body>
</html>Nous obtenons les résultats visuels suivants :
Firefox 3.5
Firefox 3.5 http://img98.imageshack.us/img98/3448/ff35.png
Internet Explorer 6
Internet Explorer 6 http://img98.imageshack.us/img98/870/ie6.png
Opera 10
Opera 10 http://img22.imageshack.us/img22/1395/o10.png
Google Chrome 3
Google Chrome 3 http://img193.imageshack.us/img193/4300/82451373.png
Ainsi, nous pouvons styliser l'élément HTML. En fait, certaines personnes utilisent cela en combinaison avec la balise BODY pour obtenir des arrière-plans compliqués.
mauris
Points
19666
N'a pas de visuel. Il définit simplement que le document est un document html et qu'il contient la head et le body.
C'est le body qui a la vue.
La barre de défilement appartient à la window si vous parlez du DOM.
Mais en CSS, vous définissez les styles de la barre de défilement à travers
Si vous utilisez Firebug sur Firefox et utilisez l'inspecteur d'éléments (celui où vous pouvez déplacer votre souris et pointer autour des éléments du document HTML, et vous le pointez sur un espace vide où il n'y a pas d'éléments, cela pointe vers le .
awe
Points
9697
En ce qui concerne les définitions CSS, les normes indiquent que vous ne pouvez pas définir de styles sur la balise html (car la balise html elle-même ne représente pas la vue, c'est le corps, comme l'a dit Mauris). Mais de nombreux navigateurs prennent en charge le fait de définir des styles sur le html quand même.
Exemple
- Cela montre l'arrière-plan de la page en rouge, avec le corps comme une boîte verte
Page Contenu de la page
Si vous supprimez la définition de style sur la balise html, la couleur d'arrière-plan et la barre de défilement sur le corps sont remplies pour toute la page. La marge n'est appliquée que pour le contenu à l'intérieur du corps.
Page
Contenu de la page
bobince
Points
270740
L'élément racine () est, selon CSS 2.1, un élément de bloc rendu comme n'importe quel autre. Il ne représente pas le viewport, donc selon la norme ce n'est pas l'élément qui donne au viewport sa barre de défilement - en fait la barre de défilement n'appartient à aucun élément.
Si quelque chose représente le viewport, c'est le concept du 'bloc conteneur initial', cependant celui-ci est 'un niveau au-dessus' de l'élément racine et ne peut être ciblé par CSS ou le DOM.
Cependant, il y a quelques cas spéciaux qui compliquent les choses. En particulier, les tests d'Ionut donnent ces résultats en raison du comportement spécial spécifié dans la section 14.2:
Le fond de l'élément racine devient le fond du canevas et couvre l'ensemble du canevas
C'est-à-dire que le fond de l'élément racine déborde de ses dimensions réelles pour remplir l'ensemble du viewport et du document. Deuxièmement:
Pour les documents dont l'élément racine est un élément HTML "HTML" ou un élément XHTML "html" avec des valeurs calculées de 'transparent' pour 'background-color' et 'none' pour 'background-image', les agents utilisateurs doivent plutôt utiliser la valeur calculée des propriétés de fond du premier élément HTML "BODY" ou élément XHTML "body" enfant de cet élément lors du dessin des fonds pour le canevas, et ne doivent pas dessiner de fond pour cet élément enfant
C'est-à-dire que, bien que l'élément ne représente certainement pas le viewport, son fond peut déborder de ses dimensions de la même manière. Ceci n'est présent que comme mesure de compatibilité ascendante, car les auteurs avaient l'habitude de spécifier des arrière-plans sur l'élément .
Vous ne pouvez donc pas utiliser background-color pour déterminer où se trouvent les dimensions de l'élément racine ou les dimensions de l'élément body. Une meilleure approche est de définir document.documentElement.style.border = 'pointillé rouge 1px'. Cela démontre que l'élément racine a les dimensions du document, pas du viewport.
Sauf en mode Quirks d'IE, où il contourne la barre de défilement. En mode Quirks, représente le viewport; en définissant body.style.overflow. hidden, vous supprimez la barre de défilement de la page. Ceci est définitivement faux; vous ne voulez pas utiliser le mode Quirks.
Pour compliquer davantage les choses, il y a des comportements spéciaux et non standards amusants qui impliquent que l'élément racine est le viewport.
Dans IE (Mode standard), la propriété 'overflow' de l'élément racine est définie sur 'scroll' et vous pouvez la mettre sur 'hidden' pour supprimer la barre de défilement du viewport. De plus, 'offsetHeight' est la hauteur du viewport et non la hauteur réelle de l'élément comme le montre la bordure.
Dans d'autres navigateurs, offsetHeight a la valeur attendue, mais (probablement pour des raisons de compatibilité) vous pouvez quand même définir document.documentElement.style.overflow sur 'hidden' (au lieu de 'visible' par défaut) pour supprimer la barre de défilement du viewport. Curieusement, dans Opera, la propriété currentStyle.overflow affichera toujours 'visible' lorsque vous avez fait cela.
En fin de compte, si vous voulez vous assurer que le viewport n'a pas de barre de défilement, vous écrivez:
html { overflow: hidden; height: 100%; }et assurez-vous d'utiliser un doctype en mode standard. La règle 'height: 100%' s'occupe du cas où un navigateur suit la norme et ne mappe pas la barre de défilement de l'élément racine sur le viewport: cela définit la hauteur pour correspondre au viewport via le 'bloc conteneur initial', donc il n'y aura pas besoin pour le viewport parent d'afficher une barre de défilement.
Md.Shadab Akhtar
Points
46
