Quiero separar de desplazamiento en cada uno de mis columnas en mi diseño de cuadrícula.

Actualmente, estoy desarrollando un móvil sólo de la aplicación web. Quiero usar un diferente diseño de cuadrícula para la orientación vertical y horizontal.

La orientación vertical está a sólo 1 columna y cada elemento es después de la otra. No hay problema aquí.

En la orientación horizontal quiero usar 2 columnas. A mi todo el contenido se muestra en el lado izquierdo y mi navegación mueve hacia el lado derecho. Ahora quiero que ambas partes se han separado de desplazamiento. Es allí una manera de implementar esto? Y el desplazamiento debe detenerse si el contenido de la columna actual termina.

Código en 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>

Muchas gracias por su tiempo!

InformationsquelleAutor SuddenlyRust | 2017-05-09

2 Comentarios

  1. 8

    En la orientación horizontal quiero usar 2 columnas. A mi todo el contenido se muestra en el lado izquierdo y mi navegación mueve hacia el lado derecho. Ahora quiero que ambas partes se han separado de desplazamiento. Es allí una manera de implementar esto? Y el desplazamiento debe detenerse si el contenido de la columna actual termina.

    En la columna de la izquierda tiene tres elementos de cuadrícula: la header, main y footer elementos.

    En la columna de la derecha tiene un elemento de cuadrícula: la nav elemento.

    La adición de una barra de desplazamiento vertical u horizontal a la izquierda de la columna no es factible debido a que hay tres elementos por separado. Usted necesidad de ajustar todos los elementos en un contenedor para una sola barra de desplazamiento al trabajo.

    La adición de una barra de desplazamiento vertical u horizontal a la columna de la derecha es bastante fácil porque sólo hay un elemento.

    Suponiendo que estamos hablando de una barra de desplazamiento vertical, aquí es una manera de hacer que funcione:

    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>

    revisado codepen


    Navegador Soporte para CSS Grid

    • Cromo – soporte completo de 8 de Marzo de 2017 (versión 57)
    • Firefox – soporte completo como de 6 de Marzo de 2017 (versión 52)
    • Safari – pleno apoyo de 26 de Marzo de 2017 (versión 10.1)
    • Borde – apoyo total al 16 de octubre de 2017 (versión 16)
    • IE11 – no hay soporte para la actual especificación; admite la versión obsoleta

    Aquí la imagen completa: http://caniuse.com/#search=grid

    • Muchas gracias @Michael_B por su tiempo. Pero esta solución sólo funciona si la navegación es más grande que la izquierda de contenido. Mi Navegación sólo se necesita la mitad del espacio de la izquierda de contenido. No estoy seguro de si esto realmente funciona muy bien con los diseños de cuadrícula.
    • codepen.io/anon/pen/ybvdJR
    • Casi funciona. Pero si he de desplazamiento en el lado izquierdo de mi navegación desaparece. Hay una manera de envolver la izquierda el contenido juntos?
    • Si usted puede envolver la izquierda de los elementos en un recipiente, luego todo se vuelve mucho más fácil. Sólo uso flexbox. codepen.io/anon/pen/jmZgEo?los editores=1100
    • Sí, gracias. Esa fue mi siguiente idea para el uso de flex. Se parece a la cuadrícula no es adecuado para mi solución! Muchas gracias por tu tiempo @Michael_B ayudado mucho 😉
  2. 2

    Aquí es una versión extendida de mi respuesta a su pregunta anterior, cómo desplazarse por tanto encabezado/contenido/principal y nav mediante flexbox.

    El violín demo

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

    • Sí, buen trabajo @LGSon. Esto funciona perfecto. Puedo hacerle algunas preguntas básicas. No soy experto en javascript. ¿Qué hace la primera y la última parte realmente? «(function(d, tiempo de espera) {» y «}(documento));» se está utilizando la variable d siempre para manipular el dom, pero ¿cómo se define? No entiendo la sintaxis. Y no me da el tiempo de espera de la variable. Se parece a la magia para mí. El código tiene sentido a la forma de mover el nav parte de todo el árbol.
    • El (function(d, timeout) {...})(); llama a un cierre y una envoltura de lo que está en él por lo que no contamina el ámbito global con variables y esas cosas. Se ejecuta a sí mismo con la última (document) y donde document (el DOM del documento) se pasa como primer parámetro d. Hice esto por lo que en lugar de escribir document.body etc, puedo usar el más corto d.body. El timeout se utiliza en el evento de cambio de tamaño y ya que se pasa como eso, como un parámetro, es accesible a través de la totalidad de cierre de la función, como una variable global. Espero que esto tenga sentido.
    • yeah wow gracias. mucho que aprender 😉 realmente appreatice su tiempo. que tengan un buen día compañero. Voy a volver a escribir en jQuery jaja. así que puedo entender que sea mucho más fácil. Pero creo que puedo usar su solución. funciona perfectamente bien
    • Que me recomiendan para no reescribir el tamaño de controlador de parte y el uso de jQuery evento de cambio de tamaño, porque no tiene el throttler la funcionalidad de la mina, a menos que usted agregue el equivalente plug-in de curso. Lo que he proporcionado con un simple javascript tiene el menor impacto posible en el rendimiento y no hay ninguna razón real para jQuery-el año fiscal ella.
    • probablemente me podía quitar de jQuery en mi proyecto actual, y tratar de reescribir todo en la llanura de javascript. ¿Cómo reescribir siguiente en la llanura JS? codepen.io/SuddenlyRust/pen/JNaygY?los editores=0010#, sería un poco complicado o? No estoy seguro de cómo agregar el ‘uno’ controlador con animationend
    • Con algo como esto: codepen.io/anon/pen/PmdJGR … a pesar de que está perfectamente bien para el uso tanto de jQuery y la llanura de javascript. Acerca de los eventos de animación, aquí es un buen artículo: sitepoint.com/css3-animation-javascript-event-handlers
    • Bueno muchas gracias @LGSon. Vas a tener que pensar en ello. Realmente appreaciate lo que no le tomó mucho tiempo para contestar a mis preguntas 😉
    • Usted es bienvenido…y respondiendo, es una forma de aprender demasiado, y he aprendido mucho simplemente por ayudar a los demás 🙂

Dejar respuesta

Please enter your comment!
Please enter your name here