Ajouter de défilement pour chaque colonne dans la Grille CSS de Mise en page

Je veux séparer de défilement sur chacune de mes colonnes dans ma grille de mise en page.

Actuellement, je suis en train d'élaborer un mobile uniquement de l'application web. Je veux utiliser une autre grille de mise en page pour les orientations portrait et paysage.

L'orientation portrait est à seulement 1 colonne et chaque élément est après les autres. Pas de problème ici.

Dans le paysage de l'orientation que je veux utiliser 2 colonnes. Tout mon contenu est affiché sur le côté gauche et ma navigation se déplace vers le côté droit. Maintenant, je veux les deux parties d'avoir un défilement. Est-il un moyen pour mettre en œuvre cette? Et le défilement doit s'arrêter si le contenu de la colonne en cours se termine.

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

CSS:

.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;
}

HTML:

<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>

Je vous remercie beaucoup pour votre temps!

InformationsquelleAutor SuddenlyRust | 2017-05-09

8

Dans le paysage de l'orientation que je veux utiliser 2 colonnes. Tout mon contenu est affiché sur le côté gauche et ma navigation se déplace vers le côté droit. Maintenant, je veux les deux parties d'avoir un défilement. Est-il un moyen pour mettre en œuvre cette? Et le défilement doit s'arrêter si le contenu de la colonne en cours se termine.

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

Dans la colonne de droite vous avez une grille de point: le nav élément.

L'ajout d'une barre de défilement verticale ou horizontale de la colonne de gauche n'est pas faisable car il y a trois éléments distincts. Vous devez placer tous les éléments dans un conteneur pour une seule barre de défilement de travail.

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

En supposant que vous parlez d'une barre de défilement verticale, voici un moyen de le faire fonctionner:

CSS:
```
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;
  }
}
```
HTML:
```
<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>
```
révisé codepen

Navigateur Support pour Grille CSS
- Chrome - soutien complet à compter du 8 Mars 2017 (version 57)
- Firefox - soutien complet à compter du 6 Mars 2017 (version 52)
- Safari - plein soutien au 26 Mars 2017 (version 10.1)
- Edge - support complet du 16 octobre 2017 (version 16)
- IE11 - pas de support pour les spec actuelle; prend en charge la version obsolète
Voici le tableau complet: http://caniuse.com/#search=grid
- Merci beaucoup @Michael_B pour votre temps. Mais cette solution ne fonctionne que si la navigation est plus grande que la gauche de contenu. Ma Navigation prend juste la moitié de l'espace de la gauche de contenu. Je ne suis pas sûr si cela fonctionne vraiment bien avec la grille de mises en page.
- codepen.io/anon/pen/ybvdJR
- Près des œuvres. Mais si j'ai de défilement sur le côté gauche de ma navigation disparaît. Est-il un moyen pour envelopper la gauche du contenu?
- Si vous pouvez envelopper la gauche des éléments dans un récipient, puis tout devient beaucoup plus facile. Utilisez simplement flexbox. codepen.io/anon/pen/jmZgEo?les éditeurs=1100
- Ouais merci. C'était mon idée suivante pour utiliser flex. Ressemble à la grille n'est pas adapté pour ma solution! Je vous remercie beaucoup pour votre temps @Michael_B vous a aidé beaucoup 😉
InformationsquelleAutor Michael_B
2

Ici est une version étendue de ma réponse à votre question précédente, comment obtenir de défilement pour les deux d'en-tête/content/principale et de la valeur liquidative à l'aide de flexbox.

Violon démo

Pile extrait de

JS:
```
(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));
```
CSS:
```
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;
  }
}
```
HTML:
```
<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>
```
- Ouais bon travail @LGSon. Cela fonctionne parfaitement. Pourrais-je vous poser quelques questions de base. Je ne suis pas qualifiés en javascript. Que fait la première et la dernière partie fait faire? "(function(d, délai d'attente) {" et "}(document));" Vous êtes à l'aide de la variable d toujours de manipuler le dom, mais comment est-il défini? Je ne comprends pas la syntaxe. Et je ne suis pas le délai d'attente variable. Ressemble à de la magie pour moi. Le code est sensé comment vous déplacez la valeur liquidative de la partie autour de l'arbre.
- Le (function(d, timeout) {...})(); appelle une fermeture et l'envelopper ce qui est en elle de sorte qu'il ne pollue pas la portée mondiale avec des variables et des trucs. Il exécute lui-même avec le dernier (document) et où document (le DOM du document) est transmis en tant que premier paramètre d. Je l'ai fait donc au lieu d'écrire document.body etc, je peux utiliser le plus court d.body. Le timeout est utilisé dans l'événement resize et depuis c'est passé comme ça, comme un paramètre, il est accessible par le biais de l'ensemble de la fermeture de la fonction, tout comme une variable globale est. Espérons que cela a du sens.
- ouais wow merci. tellement de choses à apprendre 😉 vraiment appreatice votre temps. avoir un grand jour sœur. Je vais le réécrire en jQuery haha. alors je peux comprendre qu'il est beaucoup plus facile. Mais je pense que je peux utiliser votre solution. il fonctionne parfaitement bien
- Je vous recommande de ne pas réécrire le redimensionner gestionnaire de la partie et utiliser jQuery événement de redimensionnement, car il n'a pas le throttler fonctionnalités de la mine a, sauf si vous ajoutez l'équivalent de plug-in de cours. Ce que j'ai donné à la plaine javascript a le moins d'impact possible sur les performances et il n'y a pas de véritable raison d' jQueryde l'af il.
- probablement seulement je pouvais supprimer jQuery dans mon projet actuel, et essayer de réécrire tout dans la plaine de javascript. Comment voulez-vous réécrire la suite dans la plaine du JS? codepen.io/SuddenlyRust/stylo/JNaygY?les éditeurs=0010# Ce serait un peu compliqué ou? Vous ne savez pas comment ajouter le " un " handler avec animationend
- Avec quelque chose comme ceci: codepen.io/anon/pen/PmdJGR ... mais il est parfaitement acceptable d'utiliser les deux jQuery et la plaine de javascript. Au sujet de l'animation d'événements, voici un bon article: sitepoint.com/css3-animation-javascript-event-handlers
- D'accord merci beaucoup @LGSon. Allez avoir à y penser. Vraiment goûtent que vous avez pris autant de temps pour répondre à mes questions 😉
- Vous êtes les bienvenus...et la réponse est un moyen d'apprentissage trop, et j'ai beaucoup appris par tout simplement aider les autres 🙂
InformationsquelleAutor LGSon

Vous devez vous connecter pour publier un commentaire.