1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Como colocar 2 colunas com a mesma altura?

Discussão em 'Web Development' iniciada por chantas, 13 de Outubro de 2007. (Respostas: 3; Visualizações: 2559)

  1. chantas

    chantas Power Member

    Boas pessoal! Estou a usar o Joomla para fazer um site mas tou com uma pequena duvida. Vamos lá ver se consigo explicar bem o que pretendo:

    Mto básicamente o layout divide-se em 2 colunas "left" e "right", na coluna esquerda está o menu e na coluna direita o conteudo principal do site.

    O que eu quero é que a coluna da esquerda acompanhe SEMPRE em altura a coluna da direita, isto para quando a informação é extensa na coluna direita não ficar um "vazio" debaixo do menu....quero que a background color se prolongue até ao fim da página.

    Estou a usar CSS.

    Alguém percebeu o que pretendo? :P

    Cumps.
     
  2. K0mA

    K0mA Power Member

    boas,

    Acho que te vais ver um pouco à rasca para implementar isso no joomla mas mesmo assim procura no google por "faux columns" no google.

    Boa sorte,

    K0ma
     
  3. chantas

    chantas Power Member

    Já consegui fazer o que queria! Não conhecia era o nome da técnica! Obrigao K0ma! :)
     
  4. joaopj

    joaopj Power Member

    mete isto no teu código CSS:
    Código:
    .clearfix:after {
        content:".";
        clear:both;
        height:0;
        visibility:hidden;
        display:block;
      }
    
    
    .clearfix {
        display:block;
      }
    
    
    * html .clearfix {
        height:1%;
      }
    

    E depois adiciona class="clearfix" na coluna que deve acompanhar a outra ou nas duas, já não me lembro exactamente mas experimenta e depois vês...

    Já ouvi falar do método faux columns, mas não o conheço bem. Aqui o método clearfix é fácil de implementar e eu uso-o... Não é obstrusivo e é pouco código, que pode ser comprimido 33% para ficar assim:
    Código:
    .clearfix:after{content:".";clear:both;height:0;visibility:hidden;display:block;}
    .clearfix{display:block;}
    * html .clearfix{height:1%;}
     

Partilhar esta Página