Partage
  • Partager sur Facebook
  • Partager sur Twitter

Flexbox row et scroll à désactiver

    17 février 2020 à 22:52:24

    Bonjour,

    J'effectue la formation pour devenir développeur backend en C#. A priori cette formation ne fait pas appel à JavaScript, mais je crains ne pas pouvoir y échapper pour ce que je chercher à implémenter.

    Je souhaite rendre mon e-CV quelque peu responsive en ciblant certains tailles d'écrans. Je souhaite avoir 3 colonnes centrées pour des écrans avec une largeur supérieure à 1440 pixels (j'adapterai ce seuil par la suite). Je souhaite pouvoir scroller sur la colonne de milieu, mais pas sur les 2 latérales qui ont donc une position verticale figée. De plus, je souhaite que les 2 colonnes latérales soient de largeur fixe, mais que celle du milieu s'adapte avec la largeur de l'écran (tout en concervant des marges pour que ce soit aéré).

    D'après mes recherches, le scroll ne peut-être visiblement qu'être désactivé avec une poisition fixed, hors cela se substitutionne à une position flex. L'idée consiste donc à rectifier la position de fixed à flex et inversement en JavaScript, mais je me demande s'il y a plus direct, car j'ai bien peur que ça finisse en usine à gaz pour pas grand chose. Pouvez-vous s'il vous plaît m'aiguiller ?

    Merci par avance !

    • Partager sur Facebook
    • Partager sur Twitter
      19 février 2020 à 8:50:11

      Je ne vois aucun problème pour faire ce que tu veux, mais il ne faut pas utiliser la propriété position.

      Avec un container flex, cela doit être possible.
      Aussi avec un container grid. Dans ces deux cas il est facile de fixer la largeur de deux colonnes et de rendre adaptable la colonne centrale.

      Sur le container, display:grid; et la propriété grid-template-columns pour gérer la largeur des colonnes.

      Quant aux barres de défilement, elles sont gérées par la propriété overflow.

      • Partager sur Facebook
      • Partager sur Twitter

      Alain - Linkedin

      Flexbox row et scroll à désactiver

      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
      × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
      • Editeur
      • Markdown