-1

Estou criando uma página que vai ter uma barra lateral fixa e uma <div> com o conteúdo principal da página. Abaixo está um código de exemplo:

.sidenav {
  height: 100%;
  width: 160px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  padding-top: 20px;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}
<div class="sidenav">
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#clients">Clients</a>
  <a href="#contact">Contact</a>
</div>

<div class="main">
  <p>Aqui estará o conteúdo principal da minha página.</p>
</div>

O problema é que, como vocês podem perceber, a <div> não se posiciona ao lado da sidenav.

Para isso, eu precisaria inserir um margin-leftcom a largura exata da barra lateral na <div>, mas não é isso o que eu quero. Eu quero que a <div> se posicione automaticamente ao lado da sidenav, para que não seja necessário alterar o código CSS dela caso haja alguma alteração no tamanho da barra lateral.

2 Respostas 2

0

Complementando o que o @gelson.gilmar falou você pode usar uma variavel para o size conforme abaixo

:root {
 --size-sidenav: 300px;
}

E alterando assim

.sidenav {
  height: 100%;
  width: var(--size-sidenav);
  background-color: #111;
  padding-top: 20px;
}

E o tamanho da main

.main {
  /* Coloquei o background red para facilitar a visualização. */
  background-color: red;

  /* O width vem do calculo de 100 da largura da tela subtraindo o tamanho do menu */
  width: calc(100vw - var(--size-sidenav));
}

Dessa maneira quando você alterar a largura do sidenav já irá ajustar automaticamente o tamanho da main.

-1

Segue uma solução utilizando flex-box.

* {
  /*O box-sizing como border-box para todos os itens, isso faz com que o padding e o marging não influenciem no width e no heigth*/
  box-sizing: border-box;
}

/* Fex para alinhar os itens na horizontal*/
.engloba {
  display: flex;
  flex-direction: row;
}

.sidenav {
  height: 100%;
  width: 160px;
  background-color: #111;
  padding-top: 20px;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}

.main {
  /* Coloquei o background red para facilitar a visualização. */
  background-color: red;

  /* O width vem do calculo de 100 da largura da tela subtraindo o tamanho do menu */
  width: calc(100vw - 160px);
}
<!-- Adicionei uma div englobando para definir o display flex -->
<div class="engloba">
  <div class="sidenav">
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#clients">Clients</a>
<a href="#contact">Contact</a>
  </div>

  <div class="main">
<p>Aqui estará o conteúdo principal da minha página.</p>
  </div>

</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .