1

Bom criei um div principal para comportar todos os elementos da página. Dentro dele tenho 3 outros divs: 1 barra de menu, 1 barra lateral, 1 area de conteudo.

HTML:

<div class="principal">
  <div class="barra_menu">
    Barra de menu
  </div>
  <div class="menu_lateral">
    <!--Como se estende esse div até o fim da página/elemento pai-->
    Menu lateral:<br>.<br>.<br>.
  </div>
  <div class="area_conteudo">
    Area de conteudo:<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
  </div>
</div>

CSS:

.principal{background-color:red;height:100%;}
.barra_menu{background-color:gray;widht:100%;}
.menu_lateral{background-color:blue;width:30%;float:left;}
.area_conteudo{background-color:green;width:70%;float:left;}

Eu quero que o menu lateral se estenda da posição de onde ele se encontra até o fim da página, mas não sei a solução.

Gostaria de obter uma solução baseada apenas em HTML/CSS preferencialmente sem utilizar posicionamento absoluto.

A seguir um exemplo visual do que eu quero fazer: https://jsfiddle.net/m17wuaLc/2/

3 Respostas 3

1

Lhe recomendo utilizar a técnica do Sticky Footer, caso haja necessidade de compatibilidade com navegadores antigos.

Sua estrutura HTML ficaria assim:

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 142px; 
}
.site-footer {
  background: orange;
}
.side-left{
  float:left;
  width: 30%;
}
.content{
  float:left;
  width: 70%;
}
<div class="page-wrap">
  <div class="side-left">
    Menu
  </div>
  
  <div class="content">
    Content!
  </div>
      
</div>

<footer class="site-footer">
  I'm the Sticky Footer.
</footer>

5
  • Pode adicionar um exemplo de uso na reposta?
    – user28595
    Commented 5/01/2016 às 19:09
  • Sim, claro. Mas o link tem os detalhes completo. Commented 5/01/2016 às 19:10
  • É porque resposta com links apenas não estão dentro do tipo de resposta que o site aceita como positiva. Para que sirva de referencia no futuro, caso este link deixe de existir, seria interessante ter um exemplo de uso na resposta também.
    – user28595
    Commented 5/01/2016 às 19:11
  • Pronto, exemplo incluso. Commented 5/01/2016 às 19:12
  • achei essa técnica muito interessante, mas o que estou fazendo aqui não tem um rodapé fixo, é um layout que se assemelha a de um aplicativo Commented 5/01/2016 às 19:33
0

Pode usar a propriedade:

1vh (viewport height) = 1% of viewport height

vai ficar assim

min-height:100vh;
1
  • o menu lateral não se localiza no topo da página, há uma barra vertical antes dele. ao aplicar a propiedade proposta o menu é estendido além do limite da tela. Procuro uma solução que estenda o menu da posição onde ele se encontra até o fim da tela Commented 5/01/2016 às 19:40
0

Primeiramente você deve dar ao body um

height: 100%

E a seu menu lateral-direito, o mesmo. Ficaria assim:

body{
   height: 100%
}
.menu_lateral{
   height: 100%;
}

O body possui de padrão um height: auto

Devido a isso o body se estenderá ao tamanho do maior elemento. Dando um height: 100% isso será desfeito e ele terá o tamanho da tela.

5
  • o detalhe que o menu lateral não se localiza no topo da página, há uma barra de menu antes dele. De modo que se aplicar um height 100% no menu lateral será considerado o tamanho da body relativo a posição que ele se localiza, o que estende o menu lateral além do limite da tela/elemento-pai Commented 5/01/2016 às 19:25
  • eu queria que pegasse da posição que ele se encontra até o fim da tela Commented 5/01/2016 às 19:28
  • Olhe esse jsfiddle, se for o que queria, explico em detalhes o que fiz. jsfiddle.net/m17wuaLc/6 Commented 5/01/2016 às 19:51
  • samir braga, acaba entrando no problema de todas as respostas até aqui, como há uma barra de menu antes do menu lateral é atribuido ao elemento o height:100% considerando a posição que o elemento se encontra, esticando o menu além do limite da tela... compare o seu exemplo com este: jsfiddle.net/m17wuaLc/7 Commented 5/01/2016 às 20:09
  • Não entendo a que se refere, se está se referindo ao fato do barra lateral ultrapassar o menu, isso não aconteceu no meu exemplo. Até mesmo quando atribuo um height ao menu superior. Olhe jsfiddle.net/m17wuaLc/8 . Commented 5/01/2016 às 20:18

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 .