1. #1
    Avatar de helldanger1
    Registo
    Aug 2007
    Idade
    43
    Posts
    29.633

    Padrão Colunas de altura 100% com CSS

    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%.


    Todos os artigos por mim postados, estão hosp na própria Internet,Qualquer arquivo protegido deve permanecer,no máximo, 24 horas em seu computador. - Eles podem ser baixados apenas para teste, devendo o usuário apaga-lo ou comprá-lo apos 24 horas. - A Aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário.

  2. #2
    Avatar de helldanger1
    Registo
    Aug 2007
    Idade
    43
    Posts
    29.633
    O pequeno truque de construção consiste em simular as colunas com um fundo. Na verdade vamos ter colunas normais, com camadas DIV transparentes, porém vamos situá-las sobre um fundo de cor que será o que ofereça o acabado em coluna.

    O fundo para simular as colunas

    Criaremos o fundo com o espaço que nós desejarmos, ou seja, definiremos no fundo a distribuição em colunas que necessitemos para nosso projeto. Faremos um fundo como este:






    Nota: a imagem do fundo está distorcida no tamanho, para que caiba nesta página e se possa ler bem o artigo. Nosso fundo original mede 1280x50 pixels e está criado com espaços otimizados para definições de tela de 1024 pixels de largura ou superior.

    Como se pode ver na imagem, temos uma barra que tem várias colunas, ao se repetir na vertical fará uma coluna tão alta como os conteúdos que requeiram a página.

    Para colocar a imagem de fundo, no body ou no container onde quisermos simular as colunas, faremos um CSS como este:

    background: #f0f0f0 url(fundo.gif) repeat-y 50%;

    O atributo css tem um valor position, que neste caso é 50%, com o qual conseguimos que o fundo se centralize na página.

    Criamos as colunas com camadas flutuando à esquerda e à direita

    Logo, seria só criar um container que apareça no centro da página e um par de colunas esquerda e direita, onde estejam flutuando cada uma para seu lado. vimos como fazer estas coisas com CSS.


    Todos os artigos por mim postados, estão hosp na própria Internet,Qualquer arquivo protegido deve permanecer,no máximo, 24 horas em seu computador. - Eles podem ser baixados apenas para teste, devendo o usuário apaga-lo ou comprá-lo apos 24 horas. - A Aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário.

  3. #3
    Avatar de helldanger1
    Registo
    Aug 2007
    Idade
    43
    Posts
    29.633
    O código HTML ficaria assim:

    <div id="container">
    <div id="esquerda">
    Coluna da esquerda
    </div>
    <div id="direita">
    Esta coluna da direita
    </div>
    </div>

    O código CSS do exemplo seria como este:

    body {
    background: #f0f0f0 url(fundo.gif) repeat-y 50%;
    text-align: center;
    }
    #container{
    margin:auto;
    text-align:left;
    width: 1000px;
    }
    #esquerda{
    width: 670px;
    float: left;
    margin: 10px 0px 10px 10px;
    }
    #direita{
    width: 290px;
    float: right;
    margin: 10px 5px 10px 0px;
    }

    Não tem muito mistério, sobretudo se já seguimos outros workshops publicados em criarweb.com sobre como construir webs com CSS. Aconselhamos seguir a linha de artigos que começa pelo artigo Construção CSS.



    Todos os artigos por mim postados, estão hosp na própria Internet,Qualquer arquivo protegido deve permanecer,no máximo, 24 horas em seu computador. - Eles podem ser baixados apenas para teste, devendo o usuário apaga-lo ou comprá-lo apos 24 horas. - A Aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário.

Tags para este Tópico

Permissões de Postagem

  • Você não pode iniciar novos tópicos
  • Você não pode enviar respostas
  • Você não pode enviar anexos
  • Você não pode editar suas mensagens
  •  

Conectar

Conectar