Bonsoir, 

J'ai un problème très embêtant (qui m'a pourtant l'air stupide) que je n'arrive pas à résoudre malgré moultes tentatives... Je me vois donc obligé de m'adresser à vous !

J'ai 2 éléments : 1 section qui a pour id "fond" et 1 div qui a pour id "contenu".

Voici comment ils sont liés : 

<section id="fond">
            <div id="contenu">
                   <p> ... beaucoup de contenu ...<p>
            </div>
</section>

L'élément "contenu" est donc contenu dans le conteneur "fond".

Le problème est que j'aimerais verrouiller et proportionner cet élément "contenu" à l'élément "fond" pour l'adaptabilité inter-plateforme (media queries). 

Voici mon code CSS actuel : 

#fond {
    background: url(Cadre.png) no-repeat center;
    background-size: cover;
    border: black solid;
    max-height: 2000px;
}


#contenu {
    background: purple;
    margin-top: 10%;
    margin-left: 15%;
    margin-right: 15%;
    margin-bottom: 15%;
    overflow: scroll;
}

Le problème est le suivant : 

Si l'élément "contenu" se trouve être surchargé et doit dépasser la taille de "fond", il le fait. Cela pose donc problème aussi pour "fond" qui ne réagit pas du tout à la réduction de la taille de l'écran car il conserve constamment sa taille maximale à cause de l'élément "contenu" qui se déverse en-dehors. 

J'ai essayé d'appliquer une max-width également à "contenu" pour palier à cela mais le problème n'est résolu QUE pour une dimension bien précise d'écran, la "contenu" garde sa taille maximale (mais au moins il reste à l'intérieur de "fond" et devient scrollable). L'élément "fond" garde dans ce cas également sa taille maximale peu importe la situation, on s'éloigne donc totalement du but.

Pour résumer, il me faudrait une astuce sur laquelle je n'ai pas réussi à mettre le doigt pour rendre proportionnelles les dimensions de "contenu" par rapport à "fond" tout en faisant si que ces dimensions soient en rapport avec celles de l'écran sur lequel la page est affichée et s'adaptent à celui-ci.

Je suis profondément désolé pour le long texte, mais je vous avoue qu'exposer le problème autrement ne m'a pas paru judicieux, la précision reste essentielle pour trouver une solution "facilement".

Je vous remercie en avance pour l'attention portée à ma requête.

Bonne soirée,

Aless

Salut, 

Tu as besoin de 2 astuces dans ton cas

Pour la div contenu, tu dois lui mettre une taille, et celle-ci sera en %.

#contenu{
width: 100%;
height: 100%;
}

Ici ca veut dire que #contenu prend 100% de la taille en longueur et largeur de son parent qui est #fond.

Neanmoins comme tu as mis des margin à #contenu, il va forcement dépasser.

Je vois que tu as mis un scroll à contenu, il serait plus judicieux de le mettre à #fond.

Si tu veux tout de même faire un espacement, utilise le padding (marge intérieur).

Et pour pas que ca sorte de ta div, au début de ton css rajoute cette ligne:

*{
  box-sizing: border-box;
}

Si ton element fait 100px et qu'il a une bordure de 10px, plus un margin de 10px, en realité il fait 120px, la propriété ci-dessous permet que l’élément plus bordure + ect... fasse toujours 100px.

Pour finir, utilise les unité vw et vh aulieu de px.

100vw = 100% de la largeur de l'ecran ou est affiché ta page.

100vh = 100% de la longueur.

PS: évite d'utiliser les #id dans le css, ils ont le poids le plus élevé, ce qui veut que si tu leur ajoutes une class pour modifier un style, elle ne sera pas prioritaire, et tu vas chercher des heures à comprendre pourquoi l'effet css ne marche pas sur ton élément.

-
Edité par NadfriJS 28 juin 2020 à 23:34:56

Bonsoir Nadfri,

Tout d'abord merci pour la réponse rapide et concise ! J'ai essayé les différentes solutions que tu m'as apportées et je dois avouer que malgré une amélioration, je n'ai pas pu résoudre mon problème ! Je tiens cependant à dire que cela n'est pas dû au manque d'informations de ta part mais à un manque de clarté de la mienne qui, je pense, a rendu mon problème difficile à comprendre dans sa globalité.

J'ai donc, sur les conseils et avec l'aide d'une autre personne, envisagé de "contourner" le problème !

Je te remercie encore une fois pour ton temps et tiens à m'excuser pour le manque de précision dont j'ai pu faire preuve ! 

Bonne soirée à toi,

Aless