Sujet Précédent Sujet Suivant

Créer plusieurs section de 100% height et pouvoir scrowller

Résolu/Fermé
VeeN_ Messages postés 13 Date d'inscription samedi 28 avril 2018 Statut Membre Dernière intervention 24 mars 2020 - 11 janv. 2020 à 22:25
declique69 Messages postés 14 Date d'inscription mardi 17 mai 2016 Statut Membre Dernière intervention 4 mai 2020 - 2 févr. 2020 à 22:52
Bonjour, je vous explique mon problème, je voudrais créer plusieurs section sur mon site (donc j'utilise la balise <section>). Je veux que ces différentes sections (de couleurs différentes) fassent chacune 100% height et 100% widh.
Lorsque je fais cela avec un height de 50% pour deux sections, elles sont bien en dessous des autres.
Mais lorsque je fais cela avec un height de 100%, les sections sont superposées les unes au dessus des autres alors que je veux qu'elles soient les unes en dessous les autres (et donc pouvoir srowl down et up comme elles ont toutes un height de 100%)

index.html 
<!DOCTYPE html>
<html>

    <head>
        <title>SITE</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="[/css/cssclass.php3 css]/style.css">
    </head>
    <body>

        <section id="section-a" >
            <h1>SITE</h1>
        </section>
         
        <section id="section-b" >
             <h1>SITE</h1>
        </section>

    </body>

</html>


style.css 
@font-face {
    font-family: simplifica;
    src: url("../fonts/simplifica.ttf");
  }

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  font-family: simplifica;
}

#section-a {
    height: 100vh;
    width: 100vw;
    background-color: #FF6766;
    text-align: center;
}

#section-b {
    height: 100vh;
    width: 100vw;
    background-color: #66A182;
    text-align: center;
}

h1 {
    font-size: 100px;
    color: white;
}


Voila j'espère que vous avec compris, merci d'avance pour votre aides.
A voir également:

2 réponses

Réponse 1 / 2
Tramweb
Modifié le 13 janv. 2020 à 05:45
Bonjour,
100% indique bien 100% de la place que peut prendre l'élément.
Comme dans votre classe .body vous indiquez d'autres comportement pour la page c'est un peu contradictoire ce que vous voulez faire... 
overflow: hidden;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;


Donc virez ces propriétés si vous voulez utiliser les dimensions pour positionner les éléments.
Bref utilisez soit l'un soit l'autre, un peu absurde de faire vos positionnements sinon...

Je ne sais plus si la propriété CSS overflow est "hérité" à ses "enfants" mais dans ce cas il faut virer le overflow avec comme valeur hidden qui indique que votre page(body) n'aura pas de scrollbar possible.

Autre chose section définit un élément de la page, chaque "section" de la page concerne donc différents éléments de la page sans rapport les uns avec les autres.
Il est préférable de faire suive section de la balise article (et doit contenir le titre Hx) ce qui permet d'établir une table des matières pour les navigateurs et le référencement.

Comme ceci si les sections n'ont aucun rapport entre elles: 
 <section >
<article>
            <h1>SITE</h1>
contenu...A
</article>
        </section>
         
        <section >
<article>
            <h1>SITE</h1>
contenu...B
</article>
        </section>

ou si les sections se rapportent à de mêmes éléments ce sera les différents articles qui feront la différenciation: 

 <section >
<article id="section-a" >
            <h1>SITE</h1>
contenu...A
</article>
<article id="section-b" >
            <h1>SITE</h1>
contenu...B
</article>
        </section>



Par contre pour votre CSS vous parlez de 100% mais n'avez pas indiqué 100%, sinon il serais plus simple pour l'écriture de vos identifiant CSS(ou classe pour pouvoir automatiser) de faire ceci: 
/* utilisez une classe si il y a besoin d'autres section qui n'ont pas ces propriétés*/
section {
    height: 100%;
    width: 100%;
    text-align: center;
}
/* utiliser une classe serais plus générique et permet de réutiliser le code, j'ai gardé votre façon de faire . Vous pouvez aussi utiliser des noms en rapport avec le contenu , ça permet de comprendre plus rapidement de quoi il s'agit parce que section-a n'évoquera rien pour personne vous y compris*/
#section-a {
    background-color: #FF6766;
}
#section-b{
    background-color: #66A182;
}
/* même chose en classe CSS avec des noms cohérents*/
.fondRouge{    background-color: #FF6766;}
.fondBleu{    background-color: #66A182;}


Mes proposition d'optimisation du CSS permettent d'avoir un code plus simple à modifier, lire et charger(moins de texte = chargement plus rapide etc...) et de bonnes habitudes à prendre et à toujours penser.
Pour le HTML cela permettra de respecter les standards et d'ajouter de la précision à vos contenus et la façon dont il seront pris en compte et fournis aux utilisateurs.

Pour gérer la superposition (ou pas) le lus simple est de regarder la différence entre les comportements de type display:block (par défaut de la plupart des éléments servant de containers d'autres éléments comme c'est le cas de section qui doit être associé à article pour être utilisé correctement)et display: inline (par défaut de la plupart des éléments de textes).
Il vous faudra éventuellement supprimer les marges internes et externes(margin et padding) en les fixant à 0 pour éviter les débordements (une dimension de 100% de la page ne tient pas compte des marges -voire des bordures s'il y en a - et donc sera supérieure en réalité , plus le fait que les navigateurs peuvent avoir des différences de quelques pixels dans les dimensions par défaut de ces marges.

Sinon côté ergonomie utilisateur et visibilité il n'est pas tellement recommandé de forcer une barre de défilement comme vous le faites:
_vous ne fournissez pas toutes les informations directement au regard de ceux qui les consultent
_vous forcez l'utilisateur à faire une action (et perdre du temps et des mouvements) pour lui faire consulter l'ensemble de vos contenus.

A vous de voir , c'est aussi des facteurs techniques mais associé à aucun code car des règles en art graphique/design et mise en page pour toute publication qui font que les visiteurs vont trouver agréable (et envie de voir et revenir sur le site) à la première consultation(inconsciemment) votre présentation ou pas (et ne va même pas scroller ou aller p^lus loin et ira voir un autre site ou sortir le chien ou même sera peu enclin à revenir puisque vous le forcez à faire des actions inutiles...).

cdt
1
VeeN_ Messages postés 13 Date d'inscription samedi 28 avril 2018 Statut Membre Dernière intervention 24 mars 2020
14 janv. 2020 à 11:29
Super, vos explications sont très claires, merci beaucoup !
0
Réponse 2 / 2
declique69 Messages postés 14 Date d'inscription mardi 17 mai 2016 Statut Membre Dernière intervention 4 mai 2020 2
2 févr. 2020 à 22:52
J'ai viré les lignes suivantes dans le CSS 

  width: 100%;             Inutile
  height: 100%;            inutile
  overflow: hidden;        génant
  display: flex;           contradictoire
  flex-direction: column;  inutile
  flex-wrap: wrap;         inutile


Après ça on a déjà un résultat qui ressemble plus à ce que tu demandes.
0

Discussions similaires

créer une adresse gmail pour une autre personne
Emma33000 -
Emma33000 -

2 réponses