1

Eu estou trabalhando em um projeto, que o meu menu lateral tem 300px e o meu content tem 100% relativo com o meu menu.

Eu aplico o seguinte estilo:

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100%;
}

.content {
  position: absolute;
  top: 0;
  left: 300px; /* Para que fique ao lado do menu */
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

Porém quando eu aplico isso ao site, a classe content fica maior, e aparece o scroll para visualizar o resto. Eu quero que o content fique 100%, mas relativo com o menu de 300px.

Segue o link, para vocês verem: http://codepen.io/anon/pen/lwLHJ

2
  • Bem-vindo ao site! Você poderia editar sua pergunta, selecionando os trechos de código e clicando no botão {} do editor para formatá-los adequadamente? Obrigado!
    – bfavaretto
    Commented 15/05/2014 às 14:30
  • Talvez seja melhor você parar de usar a palavra "relativo," pois se for assim já esta certo. Você esta simplesmente fazendo o .content da largura da janela e movendo ele para direita 300 pixels. Você deveria procurar alguns livros sobre HTML + CSS para estudar primeiro, pois você não tem a menor idéia do que esta fazendo. Commented 26/05/2014 às 15:12

2 Respostas 2

3

No width do .content use o valor auto.

width: auto;

Clique aqui e veja o seu código alterado no Codepen.io.

Dica: O ideal seria no lugar da tag header você usar a tag nav que tem a verdadeira função de delimitar um menu no html5.

0

No .content você pode adicionar o seguinte:

.content {
   width: calc(100% - 300px);
   position: relative;
   margin-left: 300px;
}

Não poe o .content como position: absolute, pois caso houver conteúdo, ele não acompanha as dimensões do mesmo.

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 .