Milligram: ¿Cómo empujar otros elementos hacia la derecha usando mi barra lateral?

Creado en 27 oct. 2017 · 5Comentarios · Fuente: milligram/milligram

Quiero crear una navegación lateral simple que ocupe toda la altura de la pantalla. estoy usando
Miligramo para mi base, y quiero que mi navegador lateral funcione con él. Tengo la siguiente configuración:

Demostración de Codepen

Como puede ver, mi barra lateral es el siguiente elemento

<div class="sidebar"></div>

con los siguientes estilos:

div.sidebar { 
      position: absolute; width: 250px; 
      height: 100%;
      z-index: 99; 
      background-color: black;
 }

Este tipo de trabajos, la barra lateral aparece por encima de todo, pero todo lo demás no se deja a un lado. Y si la pantalla es pequeña, el contenido choca con la barra lateral.

¿Cómo puedo hacer que la barra lateral empuje todo lo demás (incluida la barra de navegación) hacia la derecha 250px (su ancho)? Sé que esto inutilizará las cosas en pantallas más pequeñas, pero le daré al usuario una forma de alternarlo.

Hacktoberfest help wanted

Fuente

fooksupachai

👍1

Todos 5 comentarios

También encontré este problema. Con suerte, alguien ayudará con este problema.

abc985 en 14 dic. 2017

No es exactamente un problema con el marco. Lo que buscas esencialmente es una barra lateral fuera del lienzo. He modificado su Codepen para que funcione: https://codepen.io/chillyorange/pen/EQYJvQ

Se aplicó un posicionamiento fijo en la barra lateral y envolvió el contenido dentro de un elemento adicional con un margen izquierdo que coincide con el ancho de la barra lateral.

chillyorange en 29 ene. 2018

👍1

respuesta @chillyorange 's shoud a resolver su problema.

Los elementos fijos no se desplazan hacia abajo. Entonces tu barra lateral tendrá el 100% de altura como quieras.

umitkucuk en 29 ene. 2018

@fooksupachai ¡Puedo ayudarte!

Si define position: absolute este elemento se superpondrá a los demás. Puede intentar usar la cuadrícula de miligramos para tener el comportamiento esperado.

Cuadrícula de miligramos:

La propiedad CSS de la posición:

Avíseme si tiene alguna pregunta sobre cómo usar la cuadrícula de miligramos .