1

Boa noite amigos,

Estou montando um projeto com foco em aprendizado, meu projeto consiste basicamente num Layout estilo Painel Administrativo, onde tem um menu lateral à esquerda, e o conteúdo à direita. Estou utilizando para moldá-lo HTML, CSS (Bootstrap, embora tenha feito até agora tudo a mão) e Jquery.

O que me traz aqui hoje é que não estou conseguindo criar um Height dinâmico para eles, utilizei o tutorial do site do Maujor definindo para o HTML e o Body o height 100% antes mas não deu certo, olhando nas perguntas por aqui mesmo tentei colocar Position Absolute e Position relative para os blocos pai e filho, e quase deu certo, funciona quando eu coloco o "overflow:auto" na classe CSS do bloco de conteúdo (contend) mas fica aparecendo 2 Scroll na página e quando tento remover utilizando Hidden ou None, perco a altura de 100%.

Resumindo meu objetivo é esse: Quero que a Altura da SideBar aumente dinamicamente conforme o conteúdo do container ao lado também aumente. Como meu principal objetivo é o aprendizado, estou aberto e ficaria até agradecido para todas as críticas ou forma melhor de fazer meu código.

Código no JsFiddle: https://jsfiddle.net/gzcr85ha/2/
Obs: Primeira vez utilizando o JsFiddle não vi onde anexar o bootstrap e o menu ficou horrível sem a parte de bootstrap que utilizei, me perdoem por isso.

Grande abraço e desde já agradeço!

7
  • 1
    Bem vindo ao SOpt. É interessante você postar o codigo aqui também, assim facilita a analise e torna sua pergunta independente do site onde está o código. O site tem como você adicionar código semelhante ao jsfiddle, basta clicar num icone de folha com o simbolo <>
    – user28595
    4/02/2016 às 20:37
  • Cara, por que não utilizar uma framework css? Tem tantas, e com LESS ou SASS você pode personalizar o foundation ou bootstrap para deixar do seu jeito
    – rzani
    4/02/2016 às 20:38
  • 1
    Cara, por que não criar seu próprio css? Com tantas frameworks, tão extensas, será que você vai precisar de todo o css delas? E se der algum problema de layout, você vai ter que navegar por todos os arquivos ou ter que ficar reescrevendo propriedades? Ou ficar preso a um framework de css? Não estou dizendo que essas frameworks são ruins. Mas nem sempre são a melhor saída. 4/02/2016 às 22:26
  • @DiegoFelipe Obrigado pela dica Diego, irei lembrar dela para quando precisar perguntar novamente no site.
    – R. Zanel
    5/02/2016 às 3:09
  • @rzani Então amigo, eu já ouvi falar e até vi um pouco em uso o SASS mas como estou iniciando ainda em CSS achei que era mais prudente primeiro aprender ele primeiro rs..
    – R. Zanel
    5/02/2016 às 3:13

2 Respostas 2

1

Se você quer que a altura acompanhe o conteudo você deve trocar height: 100% por min-height: 100% assim:

.main {
  min-height: 100%;
  width: 100%;
  position: relative;
  display: block;
}

.side-bar {
  min-width: 285px;
  min-height: 100%;
  padding: 0px;
  margin: 0px;
  position: absolute;
  overflow: none;
  float: left;
  background: #3d3d3d;
  font-family: "Open Sans";
  font-style: red;
}

Se você quer que ambas colunas fiquem da mesma altura será necessário usar técnicas como esta:

1
  • Obrigado pela dica amigo, segui o tutorial do site que me mandou e ficou do jeito que eu queria, muito obrigado mesmo.
    – R. Zanel
    5/02/2016 às 3:01
1

Uma outra abordagem seria a utilização de vh ao invés de %.

Qual a diferença entre eles?

vh

vh = View Height (também existe a propriedade vw = view width) que se refere à altura da view port, ou seja, a altura do browser. Independe do seu parent (ou elemento pai) para ocupar ou não a altura determinada. Exemplos:

  • height: 100vh = 100% da altura do browser;
  • height: 60vh = 60% da altura do browser;

Ao definir vh você não cria vinculo algum com a div pai, ou seja, se a sua div pai possuir uma altura de 150px e o seu elemento possuir 100vh, ele vai ter o tamanho do browser, ignorando os 150px do seu elemento pai.

Nota: Ao definir vh você estará automaticamente pegando a altura do browser e aplicando ao elemento a partir do ponto de origem dele, ou seja, nem sempre você vai ter o elemento "cobrindo" a tela do browser.

Veja este exemplo: https://jsfiddle.net/eta18hpw/


%

Ao contrário do vh o % irá ocupar um valor em % com base no seu parent (elemento pai), por isso que você precisa definir uma altura de 100% ao html e body quando deseja que uma div ocupe altura total da tela.

Veja o mesmo exemplo anterior utilizando %: https://jsfiddle.net/eta18hpw/1/

Se você der um inspect irá notar que ele possui uma altura de 130px (150px do elemento pai, menos 10px de cada lado - pois o elemento pai possui um padding).

Ou seja, ele possui - em teoria - a mesma altura que o seu elemento pai, ou seja, 100%.


São abordagens diferentes, com propósitos diferentes e que são usados de modos diferentes. Eu, particularmente, uso o vh quando preciso atingir um objetivo semelhante ao seu, pois eu não preciso me preocupar com todos os elementos pais também estarem com altura 100%, apenas me preocupo com aquele elemento em específico. O layout fica mais 'organizado' e limpo.

Veja um exemplo aplicando o seu cenário: https://jsfiddle.net/1m81o0qk/

Note que se você redimensionar a tela para deixar ela menor, apenas o elemento aside irá ter o scroll (definido com overflow-y) para comportar o menu contido nele.

Espero que isso possa te ajudar.

1
  • Obrigado pela ajuda Celsom, já tinha visto antes esse "vh" e lendo sua resposta me ajudou a entendê-lo melhor, não serviu nesse caso porque eu não tinha deixado isso claro mas realmente queria que o menu e o conteúdo tivessem a mesma altura. Mas muito obrigado, vou guardar sua explicação para lembrar de utilizar no futuro quando precisar.
    – R. Zanel
    5/02/2016 às 3:06

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 .