J'essaie de définir un <div> à un certain pourcentage de hauteur en CSS, mais il reste de la même taille que le contenu qu'il contient. Lorsque j'enlève le HTML 5 <!DOCTYTPE html> Cependant, cela fonctionne, le <div> en occupant toute la page comme souhaité. 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;
}
Il peut arriver que vous souhaitiez définir la hauteur d'une division de manière conditionnelle, par exemple lorsque l'ensemble du contenu est inférieur à la hauteur de l'écran. En fixant tous les éléments parents à 100 %, le contenu sera coupé lorsqu'il sera plus long que la taille de l'écran.
Le moyen de contourner ce problème est donc de définir la hauteur minimale :
Continuer à laisser les éléments parents ajuster automatiquement leur hauteur Ensuite, dans votre div principal, soustrayez les tailles en pixels des div d'en-tête et de pied de page de 100vh (unités de visualisation). En css, quelque chose comme :
hauteur minimale : calc(100vh - 246px) ;
100vh correspond à 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 à s'afficher, au lieu d'être coupé.
Grâce aux nouvelles propriétés de dimensionnement CSS, vous pouvez vous dispenser de définir la hauteur exacte du parent. Les nouvelles block-size y inline-size peuvent être utilisées comme suit :
<!DOCTYPE html>
<style>
#parent {
border: 1px dotted gray;
height: auto; /* auto values */
width: auto;
}
#wrapper {
background-color: violet;
writing-mode: vertical-lr;
block-size: 30%;
inline-size: 70%;
}
#child {
background-color: wheat;
writing-mode: horizontal-tb;
width: 30%; /* set to 100% if you don't want to expose wrapper */
height: 70%; /* none of the parent has exact height set */
}
</style>
<body>
<div id=parent>
<div id=wrapper>
<div id=child>Lorem ipsum dollar...</div>Redimensionnez la fenêtre du navigateur en mode pleine page. Je pense que les valeurs sont relatives à la hauteur et à la largeur de la fenêtre.
Pour plus d'informations, veuillez vous référer à https://www.w3.org/TR/css-sizing-3/
Presque tous les navigateurs le supportent : https://caniuse.com/?search=inline-size
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
3 votes
Voici une explication simple et claire de la CSS
heightavec des valeurs en pourcentage : stackoverflow.com/a/31728799/35972760 votes
Règle le problème du DOCTYPE : stackoverflow.com/a/32215263/3597276
0 votes
Jetez un coup d'œil à cet article qui donne une réponse basée sur les spécifications CSS : stackoverflow.com/a/31032477/247696