Bootstrap 3 colunas de altura total: uma solução CSS personalizada

Introdução:

Criando layouts de altura total com o Twitter Bootstrap 3 podem ser desafiadores. Embora as classes nativas do Bootstrap não suportem esse recurso, é possível obter esse efeito usando CSS personalizado.

Abordagem CSS personalizada:

1. Configuração 100% Altura:
   Defina a altura do corpo, contêiner e elementos de linha como 100% para garantir que eles abranjam toda a altura do viewport.
2. Exibindo como uma tabela:
   Converta o elemento contêiner em uma tabela usando display: table. Isso permite que o conteúdo do contêiner seja organizado em uma estrutura tabular.
3. Célula flutuante:
   Adicione uma classe personalizada, como no-float, à coluna de navegação. Defina esta classe para ter display: table-cell e float: none. Isso impedirá que a coluna de navegação flutue e permitirá que ela se alinhe verticalmente com a coluna de conteúdo.

Marcação:

Header

    

        
Navigation
        
Content
    

CSS:

html, body, .container {
    height: 100%;
}
.container {
    display: table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; 
}
.row {
    height: 100%;
    display: table-row;
}
.row .no-float {
    display: table-cell;
    float: none;
}

Vantagens e considerações:

• Esta solução CSS personalizada fornece um layout de altura total compatível com Bootstrap 3.
• O A proporção de 1:3 entre navegação e conteúdo pode ser ajustada modificando as larguras das colunas no CSS.
• No entanto, é importante usar a classe personalizada (por exemplo, no-float) em vez de modificar as classes de colunas nativas do Bootstrap para evitar conflitos.