helldanger1
GForum VIP
- Entrou
- Ago 1, 2007
- Mensagens
- 29,631
- Gostos Recebidos
- 1
Como construir uma página com CSS e conseguir que a altura das colunas ocupe todo o espaço disponível da página.
Por Miguel Angel Alvarez - Tradução de JML
Com CSS podemos fazer muitas coisas de uma maneira rápida e simples. Porém, muitas vezes temos que empregar técnicas, algumas simples e outras nem tanto, para conseguir efeitos que de outra maneira são impossíveis. É o caso que falaremos neste artigo, conseguir que as colunas em uma construção CSS ocupem o 100% da altura disponível. Ou seja, ter uma página construída com várias colunas, onde todas cheguem até a parte de baixo da página.
Talvez você tenha chegado a este artigo porque não consegue um height: 100% em uma coluna ao desenhar sua página com CSS e não necessite mais explicações do que pretendemos conseguir. Porém, se não for o caso e deseja ver um exemplo de como se faria uma construção CSS com duas colunas, acesse ao artigo de CriarWeb.com Construção CSS com duas colunas. Logo, dê uma olhada na página do exemplo que se desenvolve no artigo anterior.
Você verá que a coluna que tem uma espécie de barra de navegação lateral só ocupa uma área limitada do espaço que há em vertical. Isto é porque em CSS as camadas DIV crescem verticalmente justamente o necessário, atendendo aos conteúdos que têm que se colocar dentro. Por muito que tentemos colocar um estilo CSS height:100% à camada da coluna pequena, à princípio, não conseguiremos que ocupe o mesmo espaço que a coluna grande. Porém, há uma solução a tudo isto e podemos estar tranqüilos porque é muito simples.
Antes de continuar, pode ver o exemplo de construção CSS que vamos explicar neste artigo.
Referência: Deixamos aqui um link a uma faq sobre CSS que tem relação com este artigo e que talvez interesse também ler para encontrar outros truques relacionados com camadas <div> de height: 100%.
Por Miguel Angel Alvarez - Tradução de JML
Com CSS podemos fazer muitas coisas de uma maneira rápida e simples. Porém, muitas vezes temos que empregar técnicas, algumas simples e outras nem tanto, para conseguir efeitos que de outra maneira são impossíveis. É o caso que falaremos neste artigo, conseguir que as colunas em uma construção CSS ocupem o 100% da altura disponível. Ou seja, ter uma página construída com várias colunas, onde todas cheguem até a parte de baixo da página.
Talvez você tenha chegado a este artigo porque não consegue um height: 100% em uma coluna ao desenhar sua página com CSS e não necessite mais explicações do que pretendemos conseguir. Porém, se não for o caso e deseja ver um exemplo de como se faria uma construção CSS com duas colunas, acesse ao artigo de CriarWeb.com Construção CSS com duas colunas. Logo, dê uma olhada na página do exemplo que se desenvolve no artigo anterior.
Você verá que a coluna que tem uma espécie de barra de navegação lateral só ocupa uma área limitada do espaço que há em vertical. Isto é porque em CSS as camadas DIV crescem verticalmente justamente o necessário, atendendo aos conteúdos que têm que se colocar dentro. Por muito que tentemos colocar um estilo CSS height:100% à camada da coluna pequena, à princípio, não conseguiremos que ocupe o mesmo espaço que a coluna grande. Porém, há uma solução a tudo isto e podemos estar tranqüilos porque é muito simples.
Antes de continuar, pode ver o exemplo de construção CSS que vamos explicar neste artigo.
Referência: Deixamos aqui um link a uma faq sobre CSS que tem relação com este artigo e que talvez interesse também ler para encontrar outros truques relacionados com camadas <div> de height: 100%.