J'ai une page avec une balise "nav" faisant 100% de la hauteur de la page, en précisant une hauteur aussi de 100% pour html et body. Pas de souci jusque là.
Dans mon nav, j'ai un div faisant 200px de haut, puis un autre div que je souhaiterais voir remplir le reste de la hauteur disponible jusqu'en bas de l'écran. Seul problème, si je mets une hauteur de 100% à ce div, il dépasse en bas de la page et je ne peux pas voir le contenu s'y trouvant
J'ai essayé avec une hauteur height: calc(100% - 200px) mais ça semble poser souci à Edge.
par defaut, il y'a une marge et un padding dans body. Comme tu les prends pas en compte dans
html, body, {
height: 100%;
}
tu te retrouve avec un petit ascenseur. Si tu veux fixer à 100% sans l'ascenseur, ajoute margin et padding dans ta déclaration. Je te laisse déviner la valeur pour qu'il y' ai pas de marges.
Pendant un temps j'utilisais ces valeurs "vh" qui ma paraissaient plus propre, mais sur un autre forum on m'a dit de ne pas les utiliser car ça posait régulièrement problème.
Là, vous me dite le contraire, que penser?
SFFR49> J'avais bien précisé une margin à 0 pour le body, pas pensé à le remettre dans mon post, désolé.
Je veux bien un lien vers le post du forum en question, parce que je suis curieux de voir de quels problèmes il s'agirait.
Les unités vh/vw sont parfaitement supportées aujourd'hui (https://caniuse.com/#feat=viewport-units), et on les utilise en production très régulièrement. À moins de vouloir assurer une rétrocompatibilité sur une décennie en arrière — ce qui peut arriver si on vise un segment de marché très particulier, comme la chine ou l'inde, ou bien l'intranet de LaPoste — on peut l'utiliser sans aucun risque. Et c'est bien, bien plus safe que d'essayer de maintenir une hiérarchie de "height: 100%" depuis la racine du DOM.
- Edité par EmmanuelBeziat 14 mars 2018 à 13:58:23
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas vraiment d'intérêt à utiliser vh, mais si rhoomanu l'a lu quelque part sur internet, c'est qu'il doit surement avoir raison.
Par contre, je continue à dire que
html, body {
height
margin:0;
padding:0;
}
règle le problème. On appelle cela faire un reset css et cela permet de ne plus avoir d'espace entre les éléments html et body. Si vous faites l'essai avec les éléments fourni par jouvrad, vous verrez qu'il n'y a pas d'ascenseur et ce quelque soit la résolution.
Pas vraiment d'intérêt ? Une unité directement liée au viewport, qui permet donc de faire en sorte que les éléments ait une taille relative à celui-ci ? Ça a un intérêt énorme, et ça n'a pas été créé pour rien. Loin de là. Et si tous les grands noms du dev front s'en servent, ce n'est pas un hasard.
Et non, les résets CSS ne sont pas une bonne idée. Détruire ne conduit qu'à faire perdre du temps. Il vaut mieux utiliser une feuille de style de base, comme Normalize.css, qui va harmoniser d'éventuelles fantaisies / manques entre les navigateurs (encore que ces écarts se réduisent de versions en versions).
D'autant que là, ton exemple est parlant : plus de la moitié ne sert à rien. Il n'y a aucune marge sur html, et seulement une marge externe sur body. Il aurait suffit de ça :
body {
margin: 0;
}
Mais encore, ton "reset" n'en est pas vraiment un : il ne cible que html et body, c'est un moindre mal. Les "vrais" resets sont une plaie. Le principe d'un reset, c'est de péter absolument tout ce qui est utile, juste parce qu'on "peut" vouloir se débarrasser de quelques règles par défaut sur certains éléments. Et ensuite, de perdre un temps considérable à refaire ce qu'on vient de péter… Si les éléments ont des marges par défaut, ce n'est pas pour rien. S'ils ont un style spécifique, ce n'est pas pour rien non plus.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Je prends note de tes remarques cependant je n'ai pas écrit qu'il fallait absolument faire du reset css et commencer une feuille de style par cela. Au contraire comme tu l'indiques, ce n'est pas conseillé.
Néanmoins, dans ce cadre cela répondait au problème ouvert par jouvrard et le but était de l'aider.
Dans certains cas, il peut être pratique de faire du reset css, par exemple si il faut refaire une feuille de styles pour adapter un site conçu pour des ordinateurs et non pour des mobiles ou tablettes. C'est peut être de moins en moins vrai aujourd'hui, mais cela existe toujours. D'autre part, on utilise aussi html 5.0 aujourd'hui pour faire des présentations type diaporama, et là c'est pratique de fixer la hauteur sur celle de l'écran. Bien entendu, il y'a plusieurs façon de faire.
Pour ma part, j'ai déjà utilisé le reset css d'Eric Meyer et j'ai trouvé cela intéressant. J'utilise aussi normalize.css qui est aussi un moyen de faire du reset css mais en préservant les styles par défaut des navigateurs. J'utilise aussi knacss qui n'est pas un outil de reset css mais qui permet d'adapter une feuille de style rapidement en mode responsive design.
Concernant la valeur vh, je la connais peu mais je ne doute pas de son intérêt. Je privilégie aussi le travail en valeur relative. Je suis habituer à utiliser em. Parfois, il faut faire un peu de gymnastique. Peut être que vh est plus intéressant à travailler. Je vais regarder cela.
Mon sujet aura au moins eu comme intérêt d'apporter un peu de débat.
Concernant l'utilisation de "em" j'utilise de plus en plus ça aussi même si au départ on a tendance à faire pas mal d'erreur et en pensant inconsciemment se baser sur une valeur absolue, ce qui amène parfois à des tailles... farfelues...
Pour ça, tu peux utiliser rem, qui a l'avantage de se baser sur la valeur racine (le font-size de body). Ça évite de devoir calculer des rapports de taille par héritage.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Hauteur de 100% de la page
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !