Je maîtrise encore mal les échelles en % puisque j'ai maintenant un nouveau problème.
le contenu (une div) ne reste pas dans la section (le conteneur) que je souhaiterais (il dépasse quand la fenêtre est ouvert à sa dimension maximum). Cette section est déterminé par un height: 100vh il prendra verticalement toute la taille de la fenêtre. Le problème est que le contenu de cette section dépasse de la limite de sa propre dimension.
J'aimerais que ça ne soit pas le cas.
J'ai essayé une nouvelle fois max-width:100% et max-height:100% et beaucoup d'autres techniques mais cela n'a pas d'impact sur la mise en page.
J'utilise des tailles de police en vmax peut-être est-ce là le problème ?
Y a-t-il un rapport avec overflow ? Je ne pense pas, je ne veux pas un scrool ou autre, je veux juste qu'il ne dépasse pas de son conteneur. Qu'il stop l'agrandissement une fois qu'il a atteint sa dimension maximum de son conteneur.
Avez-vous une solution ?
8 réponses
Hello, tu peux montrer ton HTML/CSS? :)
Alors en général les propriétés VH et VW ça cause pas mal de problèmes, c'est mieux d'utiliser des height 100% et pour les éléments utiliser flexbox (grow, shrink)
<section class="toutesection">
<div class="contenusection">
<div id="contenuarticlesection4">
<article>
<h1>Démarche</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec
sagittis massa. Nulla facilisi. Cras id arcu lorem, et semper purus.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Duis vel enim mi, in lobortis sem.
Vestibulum luctus elit eu libero ultrices id fermentum sem sagittis.
Nulla imperdiet mauris sed sapien dignissim id aliquam est aliquam.
Maecenas non odio ipsum, a elementum nisi. Mauris non erat eu erat
placerat convallis.
</p>
<div id="banniere">
<img src="images/banniere.png" alt="photo représentant des personnes solidaire" />
</div>
</article>
</div>
</div>
</section>
.toutesection {
border: solid #d40707;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
border: solid #ff00c8;
display: flex;
flex-direction: column;
align-items: flex-end;
max-width: 100%;
max-height: 100%;
}
border: solid #d5fa04;
max-width: 100%;
max-height: 100%;
}
max-width: 100%;
max-height: 100%;
}
ul li,
p {
list-style-type: none;
text-align: justify;
font-size: 1.6vmax;
}
font-size: 1.6vmax;
}
font-size: 2vmax;
}
@media all and (min-width: 1024px) {
.contenusection {
margin-left: 8vw;
margin-right: 8vw;
max-width: 100%;
max-height: 100%;
}
section {
border: solid #d4f806;
height: 100vh;
width: 100%;
overflow: hidden;
}
}
J'ai mis le overflow hidden mais ce n'est pas ce que je souhaite puisque le contenu est coupé, j'aimerais que le contenu s'adapte au conteneur. Que le contenu s'arrette de s'agrandir une fois qu'il à atteint les limites des dimensions de son conteneur. Je confirme que le vh est complexe à maitriser mais je suis partie là-dessus depuis un certain temps, ce que je vous montre n'est qu'une seule partie de mon travail. j'ai 300 autres lignes de codes basé sur la section en vh, j'aimerais ne pas tout recommencer si possible.
Qu'est-ce que vous en pensez ?
Alors pour commencer je repost le code en propre x)
<section class="toutesection">
<div class="contenusection">
<div id="contenuarticlesection4">
<article>
<h1>Démarche</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec
sagittis massa. Nulla facilisi. Cras id arcu lorem, et semper purus.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Duis vel enim mi, in lobortis sem.
Vestibulum luctus elit eu libero ultrices id fermentum sem sagittis.
Nulla imperdiet mauris sed sapien dignissim id aliquam est aliquam.
Maecenas non odio ipsum, a elementum nisi. Mauris non erat eu erat
placerat convallis.
</p>
<div id="banniere">
<img src="images/banniere.png" alt="photo représentant des personnes solidaire" />
</div>
</article>
</div>
</div>
</section>CSS
.toutesection {
border: solid #d40707;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
contenuarticlesection4 {
border: solid #ff00c8;
display: flex;
flex-direction: column;
align-items: flex-end;
max-width: 100%;
max-height: 100%;
}
contenuarticlesection4 article {
border: solid #d5fa04;
max-width: 100%;
max-height: 100%;
}
contenuarticlesection4 img {
max-width: 100%;
max-height: 100%;
}
ul li, p {
list-style-type: none;
text-align: justify;
font-size: 1.6vmax;
}
contenuarticlesection4 p {
font-size: 1.6vmax;
}
contenuarticlesection4 h1 {
font-size: 2vmax;
}
@media all and (min-width: 1024px) {
.contenusection {
margin-left: 8vw;
margin-right: 8vw;
max-width: 100%;
max-height: 100%;
}
section {
border: solid #d4f806;
height: 100vh;
width: 100%;
overflow: hidden;
}
}Avec ça ça devrait aller mieux, renseignes toi sur les flex shrink et flex grow, c'est super pratique pour faire ce que tu veux faire ;)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
max-height: 100%;
}
.toutesection {
border: solid #d40707;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
#contenuarticlesection4 {
border: solid #ff00c8;
display: flex;
flex-direction: column;
align-items: flex-end;
max-width: 100%;
max-height: 100%;
}
#contenuarticlesection4 article {
border: solid #d5fa04;
max-width: 100%;
max-height: 100%;
}
#contenuarticlesection4 img {
max-width: 100%;
max-height: 100%;
}
ul li, p {
list-style-type: none;
text-align: justify;
font-size: 1.6vmax;
}
#contenuarticlesection4 p {
font-size: 1.6vmax;
}
#contenuarticlesection4 h1 {
font-size: 2vmax;
}
@media all and (min-width: 1024px) {
.contenusection {
margin-left: 8vw;
margin-right: 8vw;
max-width: 100%;
max-height: 100%;
}
section {
border: solid #d4f806;
height: 100%;
width: 100%;
overflow: hidden;
}
}En gros au lieux du 100vh dans la media j'ai placé à 100%, et je t'ai rajouté les deux premiers selecteurs, box-sizing pour indexer la taille par rapport à la bordure (obligatoire quad tu a des border) html body a 100% et la margin et padding a 0 c'est le premier truc a faire dans tous fichier CSS (les navigateurs s'amusent a placer des marges et des paddings, et c'est problème ^^')
Merci pour l'aide et tes réponses !
Effectivement ça rentre dedans mais je n'ai plus la dimension de l'écran.
Puis-je prendre la taille de l'écran pour chacune de mes section sans utiliser vh ?
Avec flex shrink et flex grow ?
Alors j'ai vus des bordures du coup j'ai ajouté quelques padding que tu peux retirer ^^
Pour le flex en gros c'est simple:
Tu fait une section globale qui fera 100% en hauteur
Ensuite pour tes sections tu fait un flex-grow: 1 et flex-shrink: 0 pour dire que la section doit gratter le max de la section disponibl, si plusieurs div ont une flex grow ils se partagent la place, le flex-shrink 0 permet de dire qu'il ne faut pas écraser les éléments si manque de place
Les élément qui doivent rester petits tu les mets en flex-grow: 0 et flex-shrink: 0
Les éléments que tu peux écraser au cas ou il n'y a pas assez de place tu les mets en flex-shrink: 1, si l'ecran devien trop petit cet élément va s'écraser
En gros flex-grow: 1 = l'élément s'étends
flex-grow: 0 = l'élément ne s'étends pas
flex-shrink: 1 = l'élément s'écrase pour faire de la place
flex-shrink: 0 = l'élément ne s'écrase pas
tu peux mixer le flex-shirnk: 1 avec un min-height pour que l'élément ne s'écrase pas trop