web-dev-qa-db-fra.com

Ajouter un défilement à chaque colonne dans la disposition de la grille CSS

Je veux un défilement séparé sur chacune de mes colonnes dans ma disposition de grille.

Actuellement, je développe une application web uniquement mobile. Je souhaite utiliser une disposition de grille différente pour les orientations portrait et paysage.

L'orientation du portrait est d'une seule colonne et chaque élément est l'un après l'autre. Pas de problème ici.

Dans l'orientation paysage, je veux utiliser 2 colonnes. Tout mon contenu est affiché à gauche et ma navigation se déplace à droite. Maintenant, je veux que les deux parties aient un défilement séparé. Existe-t-il un moyen de mettre cela en œuvre? Et le défilement devrait s'arrêter si le contenu de la colonne actuelle se termine.

Code sur CodePen: https://codepen.io/SuddenlyRust/pen/rmJOqV

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-gap: 15px 0;
}

header {
  background-color: green;
  grid-column: 1;
  grid-row: 1
}

main {
  background-color: blue;
  grid-column: 1;
  grid-row: 2;
}

nav {
  background-color: pink;
  grid-column: 1;
  grid-row: 3;
}

footer {
  background-color: teal;
  grid-column: 1;
  grid-row: 4;
}

@media only screen and (orientation: landscape) {
  .grid-container {
    grid-template-columns: 5fr 4fr;
  }
  nav {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
  footer {
    grid-row: 3;
  }
}

h1 {
  min-height: 200px;
}
<div class="grid-container">
  <header>
    <h1>Logo</h1>
  </header>
  <main>
    <h1>content</h1>
  </main>
  <nav>
    <h1>Navigation</h1>
  </nav>
  <footer>
    <h1>Footer</h1>
  </footer>
</div>

Merci beaucoup pour votre temps!

htmlcssflexboxcss-grid
7
SuddenlyRust

Dans l'orientation paysage, je veux utiliser 2 colonnes. Tout mon contenu est affiché à gauche et ma navigation se déplace à droite. Maintenant, je veux que les deux parties aient un défilement séparé. Existe-t-il un moyen de mettre cela en œuvre? Et le défilement devrait s'arrêter si le contenu de la colonne actuelle se termine.

Dans la colonne de gauche, vous avez trois éléments de grille distincts: les éléments header, main et footer.

Dans la colonne de droite, vous avez un élément de grille: l'élément nav.

L'ajout d'une barre de défilement - verticale ou horizontale - dans la colonne de gauche n'est pas possible car il existe trois éléments distincts. Vous devez encapsuler tous les éléments dans un conteneur pour qu'une seule barre de défilement fonctionne.

L'ajout d'une barre de défilement - verticale ou horizontale - dans la colonne de droite est assez facile car il n'y a qu'un seul élément.

En supposant que vous parlez d'une barre de défilement verticale, voici une façon de la faire fonctionner:

body {
  margin: 0;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-gap: 15px 0;
  height: 100vh;
}

header {
  background-color: green;
  grid-column: 1;
  grid-row: 1
}

main {
  background-color: blue;
  grid-column: 1;
  grid-row: 2;
}

nav {
  background-color: pink;
  grid-column: 1;
  grid-row: 3;
  overflow: auto;
}

footer {
  background-color: teal;
  grid-column: 1;
  grid-row: 4;
}

@media only screen and (orientation: landscape) {
  .grid-container {
    grid-template-columns: 5fr 4fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
  nav {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
  footer {
    grid-row: 3;
  }
}
<div class="grid-container">
  <header>
    <h1>Logo</h1>
  </header>
  <main>
    <h1>content</h1>
  </main>
  <nav>
    <h1>Navigation<br><br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br></h1>
  </nav>
  <footer>
    <h1>Footer</h1>
  </footer>
</div>

codepen révisé

Prise en charge du navigateur pour la grille CSS

  • Chrome - prise en charge complète à partir du 8 mars 2017 (version 57)
  • Firefox - prise en charge complète à partir du 6 mars 2017 (version 52)
  • Safari - prise en charge complète à partir du 26 mars 2017 (version 10.1)
  • Edge - prise en charge complète à partir du 16 octobre 2017 (version 16)
  • IE11 - pas de support pour les spécifications actuelles; prend en charge la version obsolète

Voici l'image complète: http://caniuse.com/#search=grid

8
Michael_B

Voici une version étendue de ma réponse à votre question précédente , comment obtenir le défilement pour l'en-tête/le contenu/principal et la navigation en utilisant flexbox.

Démo Fiddle

Extrait de pile

(function(d, timeout) {
  window.addEventListener("load", function() {
    resizeHandler();
  }, false);

  window.addEventListener("resize", function() {
    if (!timeout) {
      timeout = setTimeout(function() {
        timeout = null;
        // do resize stuff
        resizeHandler();
      }, 66);
    }
  }, false);

  function resizeHandler() {
    if (window.innerHeight < window.innerWidth) {
      if (!(d.body.classList.contains('landscape'))) {
        d.body.classList.add('landscape');
        d.body.appendChild(d.querySelector('nav'));
      }
    } else {
      if (d.body.classList.contains('landscape')) {
        d.body.classList.remove('landscape')
        d.querySelector('section').appendChild(d.querySelector('nav'));
      }
    }
  }
}(document));
html, body {
  margin:0;
}
header, footer, main, nav {
  margin: 5px;
  padding: 5px;
  border-radius: 5px;
  min-height: 120px;
  border: 1px solid #eebb55;
  background: #ffeebb;
}
footer {
  order: 2;
}
nav {
  order: 1;
}
section {
  display: flex;
  flex-direction: column;
}

@media only screen and (orientation: landscape) {

  main div {
    height: 400px;
    border: 1px dashed red;
  }
  nav div {
    height: 800px;
    border: 1px dashed red;
  }

  body.landscape {
    display: flex;
  }
  section {
    display: block;
    width: calc(60% - 10px);         /*  10px is for the margin  */
    box-sizing: border-box;
    max-height: calc(100vh - 20px);
    overflow: auto;
  }
  nav {
    width: calc(40% - 10px);         /*  10px is for the margin  */
    box-sizing: border-box;
    max-height: calc(100vh - 20px);
    overflow: auto;
  }
}
<section>
  <header>header</header>
  <main>content
    <div>
      This div get a height when in landscape to show scroll in section
    </div>
  </main>
  <footer>footer</footer>
  <nav>navigation
    <div>
      This div get a height when in landscape to show scroll in nav
    </div>
  </nav>
</section>
3
LGSon