Skip to main content
adicionou 2 caracteres ao conteúdo
Fonte Link
Ricardo
  • 5,7mil
  • 3
  • 28
  • 54

Bom criei um div principal para comportar todos os elementos da página. Dentro dele tenho 3 outros divsdivs: 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/

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/

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/

Fonte Link
Adriano Luz
  • 1mil
  • 8
  • 19

Como estender um DIV até o fim da tela?

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/