Milligram: Como empurrar outros elementos para a direita usando minha barra lateral?

Criado em 27 out. 2017 · 5Comentários · Fonte: milligram/milligram

Quero criar uma navegação lateral simples que ocupe toda a altura da tela. estou usando
Miligrama para minha base, e quero que meu navegador lateral funcione com ele. Eu tenho a seguinte configuração:

Demonstração Codepen

Como você pode ver, minha barra lateral é o seguinte elemento

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

com os seguintes estilos:

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

Isso funciona, a barra lateral aparece acima de tudo, mas todo o resto não é empurrado para o lado. E se a tela for pequena, o conteúdo vai contra a barra lateral.

Como posso fazer com que a barra lateral empurre todo o resto (incluindo a barra de navegação) para a direita em 250 px (sua largura)? Sei que isso tornará as coisas inutilizáveis em telas menores, mas darei ao usuário uma maneira de alternar isso.

Hacktoberfest help wanted

Fonte

fooksupachai

👍1

Todos 5 comentários

Eu também encontrei esse problema. Espero que alguém ajude com este problema.

abc985 em 14 dez. 2017

Não é exatamente um problema com a estrutura. O que você está essencialmente procurando é uma barra lateral fora da tela. Modifiquei seu Codepen para que funcione: https://codepen.io/chillyorange/pen/EQYJvQ

Aplicou posicionamento fixo na barra lateral e envolveu o conteúdo dentro de um elemento adicional com uma margem esquerda correspondendo à largura da barra lateral.

chillyorange em 29 jan. 2018

👍1

A resposta de @chillyorange deve resolver seu problema.

Os itens fixos não rolam para baixo. Assim, sua barra lateral terá 100% de altura conforme você desejar.

umitkucuk em 29 jan. 2018

@fooksupachai eu posso te ajudar!

Se você definir position: absolute este elemento se sobreporá aos outros. Você pode tentar usar a grade de miligramas para ter o comportamento esperado.

Grade de miligramas:

A propriedade CSS position:

Entre em contato se tiver alguma dúvida sobre como usar a