J'essaie de définir un <div>sur une certaine hauteur en pourcentage dans CSS, mais il reste juste la même taille que le contenu qu'il contient. Lorsque je supprime le HTML 5<!DOCTYTPE html> , cela fonctionne, en <div>occupant toute la page comme vous le souhaitez. Je veux que la page soit validée, alors que dois-je faire?
J'ai ce CSS sur le <div>, qui a un ID de page:
#page {
padding: 10px;
background-color: white;
height: 90% !important;
}
heightpropriété CSS avec des valeurs en pourcentage: stackoverflow.com/a/31728799/3597276Réponses:
Pourcentage de quoi?
Pour définir une hauteur en pourcentage, son élément parent (*) doit avoir une hauteur explicite. Cela va de soi, en ce que si vous laissez la hauteur comme
auto, le bloc prendra la hauteur de son contenu ... mais si le contenu lui-même a une hauteur exprimée en pourcentage du parent que vous avez fait vous-même un peu Catch 22. Le navigateur abandonne et utilise simplement la hauteur du contenu.Le parent du div doit donc avoir une
heightpropriété explicite . Bien que cette hauteur puisse également être un pourcentage si vous le souhaitez, cela ne fait que faire passer le problème au niveau suivant.Si vous voulez faire de la hauteur div un pourcentage de la hauteur de la fenêtre, chaque ancêtre du div, y compris
<html>et<body>, doit avoirheight: 100%, il existe donc une chaîne de hauteurs en pourcentage explicites jusqu'au div.(*: ou, si le div est positionné, le 'bloc contenant', qui est l'ancêtre le plus proche à positionner également.)
Alternativement, tous les navigateurs modernes et IE> = 9 prennent en charge de nouvelles unités CSS relatives à la hauteur de la fenêtre (
vh) et la largeur de la fenêtre (vw):Voir ici pour plus d'informations .
la source
Vous devez régler la hauteur sur les
<html>et<body>éléments ainsi; sinon, ils seront seulement assez grands pour s'adapter au contenu. Par exemple :la source
La réponse de bobince vous permettra de savoir dans quels cas "hauteur: XX%;" fonctionnera ou ne fonctionnera pas.
Si vous souhaitez créer un élément avec un rapport défini (hauteur:% de sa propre largeur), la meilleure façon de le faire est de définir efficacement la hauteur à l'aide de
padding-bottom. Exemple pour le carré:Le conteneur carré sera simplement composé de rembourrage et le contenu se développera pour remplir le conteneur. Long article de 2009 sur ce sujet: http://alistapart.com/article/creating-intrinsic-ratios-for-video
la source
Vous pouvez utiliser
100vw / 100vh. CSS3 nous donne des unités relatives à la fenêtre. 100vw signifie 100% de la largeur de la fenêtre. 100vh; 100% de la hauteur.la source
Dans un autre cas, pour vous débarrasser de ce pourcentage parent définissant, vous pouvez utiliser
corps {hauteur: 100vh}
vh représente la hauteur de la fenêtre
Je pense que ça aide
la source
Parfois, vous souhaiterez peut-être définir de manière conditionnelle la hauteur d'un div, par exemple lorsque tout le contenu est inférieur à la hauteur de l'écran. La définition de tous les éléments parents sur 100% coupera le contenu lorsqu'il est plus long que la taille de l'écran.
Donc, le moyen de contourner cela est de définir la hauteur min:
Continuez à laisser les éléments parents ajuster automatiquement leur hauteur Ensuite, dans votre div principal, soustrayez les tailles de pixels de l'en-tête et du pied de page div de 100vh (unités de la fenêtre). En css, quelque chose comme:
hauteur min: calc (100vh - 246px);
100vh est la longueur totale de l'écran, moins les divs environnants. En définissant la hauteur minimale et non la hauteur, le contenu plus long que l'écran continuera à circuler, au lieu d'être coupé.
la source