CSS Plein Écran - Position absolue vs 100% de la hauteur
Lors de la création d'un plein écran div
dans le html & css on a deux options principales:
À l'aide de: html, body, #myDiv {height: 100%, width: 100%}
Ou: #myDiv{position: absolute; top:0px; bottom:0px; width: 100%}
Est-il un avantage de l'un sur l'autre ou ils peuvent juste être utilisées de façon interchangeable?
personnellement, je utiliser
Réglage
min-height:100%
de sorte que si votre contenu doit overflow
il peut. Mais im fractionnement de poils ici.Réglage
html
et body
à une hauteur fixe de 100% peut facilement conduire à des problèmes lorsque vous régulièrement du contenu qui est plus élevé que cela.OriginalL'auteur k-nut | 2014-11-24
Vous devez vous connecter pour publier un commentaire.
La fois de produire le même effet, c'est à dire en plein écran div.
Maintenant, la seule diff. est entre le positionnement de l'attribut
Maintenant, quand vous avez votre css
alors la position par défaut de l'attribut est statique, ce qui signifie qu'il ne sera normalement flux dans la page web
Mais lorsque vous appliquez
C'est un peu différente de la précédente. Avec une position absolue, cela signifie que cette div est par rapport à l'élément parent immédiat ou s'il n'existe aucun élément parent alors c'est par rapport à la page elle-même. Vous pouvez voir l'effet que si vous avez une autre div en tant que parent de l'élément en u et insérer un texte ou une image dans #myDiv
Également un élément à la position absolue est retiré du flux d'éléments sur la page, ce qui signifie qu'il ne sera pas affecter d'autres éléments et d'autres éléments ne l'affectera pas
Vous pouvez vérifier l'jsfiddle lien et vous verrez combien la position du texte varie dans les deux styles http://jsfiddle.net/sidarth1989/32szd39g/
OriginalL'auteur Sidarth
Fenêtre d'affichage des unités relatives sont maintenant assez bien pris en charge... de sorte que vous pouvez faire cela:
Voir ici:
https://www.w3.org/TR/css3-values/#viewport-relative-lengths
OriginalL'auteur iambrandonn
Un moyen de plus pour créer un plein écran div est à appliquer
height: 100%;
àbody
,html
etdiv
, puis à appliquerposition:relative
pour le plein écran, div. Comme l'exemple suivant:Un exemple: http://jsfiddle.net/s04scj0m/1/
OriginalL'auteur Vangel Tzo