Twitter bootstrap 3 duas colunas de altura total

Estou tentando criar um layout de altura total de duas colunas com o twitter bootstrap 3. Parece que o twitter bootstrap 3 não suporta layouts de altura total. O que eu quero fazer:

  +-------------------------------------------------+
  |                     Header                      |
  +------------+------------------------------------+
  |            |                                    |
  |            |                                    |
  |Navigation  |         Content                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  +------------+------------------------------------+

Se o conteúdo crescer, a navegação também deve aumentar.

• A altura 100% para todos os pais não funciona porque existe o caso em que o conteúdo é uma linha.
• posição absoluta parece estar no caminho errado
• display: tablee display:table-cellresolver o problema, mas não é elegante

html:

    <div class="container">
      <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-9"></div>
      </div>
    </div>

Existe maneira de fazê-lo com o twitter bootstrap padrão 3 classes?

Edit: No Bootstrap 4 , as classes nativas podem produzir colunas de altura total ( DEMO ) porque alteraram seu sistema de grade para flexbox. (Leia sobre o Bootstrap 3)

Demonstração Bootply / Codepen

Marcação:

<header>Header</header>
<div class="container">
    <div class="row">
        <div class="col-md-3 no-float">Navigation</div>
        <div class="col-md-9 no-float">Content</div>
    </div>
</div>

CSS (relevante)

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    box-sizing: border-box;
}

.row {
    height: 100%;
    display: table-row;
}

.row .no-float {
  display: table-cell;
  float: none;
}

O código acima alcançará colunas de altura total (devido às propriedades personalizadas da tabela css que adicionamos) e com proporção 1: 3 (Navegação: Conteúdo) para larguras médias da tela e acima - (devido às classes padrão do bootstrap: col-md -3 e col-md-9)

NB:

1) Para não atrapalhar as classes de colunas nativas do bootstrap, adicionamos outra classe, como no-floatna marcação e apenas definimos display:table-celle float:nonenesta classe (ao contrário das próprias classes de coluna).

2) Se quisermos usar apenas o código da tabela css para um ponto de interrupção específico (digamos, larguras de tela médias e acima), mas para telas móveis, queremos voltar ao comportamento usual de autoinicialização, podemos envolver nosso CSS personalizado dentro de um consulta de mídia, diga:

@media (min-width: 992px) {
  .row .no-float {
      display: table-cell;
      float: none;
  }
}

Codepen demo

Agora, para telas menores, as colunas se comportarão como colunas de autoinicialização padrão (cada uma obtendo largura total).

3) Se a proporção de 1: 3 for necessária para todas as larguras de tela - provavelmente será melhor remover as classes col-md- * do bootstrap da marcação, porque não é assim que elas devem ser usadas.

Codepen demo

Você pode conseguir o que deseja com o padding-bottom: 100%; margin-bottom: -100%;truque, como pode ver neste violino.

Eu mudo seu HTML um pouco, mas você pode obter o mesmo resultado com seu próprio HTML com o seguinte código

.col-md-9 {
    overflow: hidden;
}

.col-md-3 {
    padding-bottom: 100%;
    margin-bottom: -100%;
}

Solução CSS pura

Violino de trabalho

Usando apenas CSS2.1, trabalhe com todos os navegadores (IE8 +), sem especificar nenhuma altura ou largura.

Isso significa que, se o cabeçalho aumentar repentinamente ou a navegação esquerda precisar aumentar, você não precisará consertar nada no CSS.

Totalmente responsivo, simples, claro e muito fácil de gerenciar.

<div class="Container">
    <div class="Header">
    </div>
    <div class="HeightTaker">
        <div class="Wrapper">
            <div class="LeftNavigation">
            </div>
            <div class="Content">
            </div>
        </div>
    </div>
</div>

Explicação: O contêiner divocupa 100% da altura do corpo e é dividido em 2 seções. A seção do cabeçalho abrangerá a altura necessária e HeightTakero restante será suportado. Como é conseguido? flutuando um elemento vazio ao longo do lado do contêiner com 100% de altura (usando :before) e dando ao HeightTakerelemento vazio no final a regra clara (usando :after). esse elemento não pode estar na mesma linha do elemento flutuante, então ele é empurrado até o fim. que é exatamente 100% do documento.

Com isso, tornamos o HeightTakerintervalo o restante da altura do contêiner, sem declarar qualquer altura / margem específica.

dentro disso HeightTaker, construímos um layout flutuante normal (para obter a coluna como uma tela) com uma pequena alteração. temos um Wrapperelemento necessário para que a 100%altura funcione.

Atualizar

Aqui está a demonstração com as classes Bootstrap. (Acabei de adicionar uma div ao seu layout)

Pensei em uma mudança sutil, que não altera o comportamento padrão da inicialização. E só posso usá-lo quando preciso:

.table-container {
  display: table;
}

.table-container .table-row {
  height: 100%;
  display: table-row;
}

.table-container .table-row .table-col {
  display: table-cell;
  float: none;
  vertical-align: top;
}

para que eu possa usá-lo assim:

<div class="container table-container">
  <div class="row table-row">
    <div class="col-lg-4 table-col"> ... </div>
    <div class="col-lg-4 table-col"> ... </div>
    <div class="col-lg-4 table-col"> ... </div>
  </div>
</div>

Que eu saiba, você pode usar até 5 métodos para fazer isso:

1. O uso do CSS exibe as propriedades da tabela / célula da tabela ou o uso de tabelas reais.
2. Usando um elemento posicionado absoluto dentro do invólucro.
3. Usando a propriedade de exibição Flexbox, mas, atualmente, ele ainda possui suporte parcial
4. Simule alturas de coluna completas usando a técnica de coluna falsa .
5. Usando a técnica de preenchimento / margem. Veja exemplo .

Bootstrap: Não tenho muita experiência com isso, mas acho que eles não fornecem estilos para isso.

.row
{
    overflow: hidden;
    height: 100%;
}
.row .col-md-3,
.row .col-md-9 
{
    padding: 30px 3.15% 99999px; 
    float: left;
    margin-bottom: -99999px;
}
.row .col-md-3 p,
.row .col-md-9 p 
{
    margin-bottom: 30px;
}
.col-md-3
{
    background: pink;
    left:0;
    width:25%
}
.col-md-9
{
    width: 75%;
    background: yellow;
}

Solução moderna e muito simples:

HTML:

<div class="container">
  <div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-9"></div>
  </div>
</div>

CSS:

.row{
    display: flex;
}

Uma solução CSS pura é bastante fácil e funciona como um navegador cruzado de charme.

Você simplesmente adiciona um preenchimento grande e uma margem negativa igualmente grande às colunas de navegação e conteúdo e, em seguida, agrupa sua linha em uma classe com o estouro oculto.
Visualização ao vivo
Editar visualização

HTML

<div class="container">

  <div class="row">
    <div class="col-xs-12 header"><h1>Header</h1></div>
  </div>

  <div class="row col-wrap">

    <div class="col-md-3 col">
      <h1>Nav</h1>
    </div>

    <div class="col-md-9 col">
      <h1>Content</h1>
    </div>

  </div>
</div>

CSS

.col{
margin-bottom: -99999px;
padding-bottom: 99999px;
}

.col-wrap{
overflow: hidden; 
}  

Boa sorte!

A solução pode ser alcançada de duas maneiras

1. Usando display: table e display: table-cell
2. Usando preenchimento e margem negativa.

As classes usadas para obter a solução acima não são fornecidas no bootstrap 3. display: table e display: table-cell são fornecidas, mas apenas ao usar tabelas em HTML. margem negativa e classes de preenchimento também não estão lá.

Portanto, temos que usar css personalizado para conseguir isso.

A seguir está a primeira solução

Código HTML:

<div class="container">
  <div class="row">
    <div class="col-md-12">
        <div class="page-header">
            <h3>Page-Header</h3>
        </div>
    </div>
  </div>
  <div class="row tablewrapper">
    <div class="col-md-12 tablerowwrapper">
        <div class="col-md-3 sidebar pad_top15">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">Submenuone</a></li>
                <li><a href="#">Submenutwo</a></li>
                <li><a href="#">Submenuthree</a></li>
            </ul>
        </div>
        <div class="col-md-9 content">
            <div class="col-md-12">
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
            </div>
        </div>
    </div>
  </div>

</div>

o css correspondente:

html,body,.container{
        height:100%;
    }
    .tablewrapper{
        display:table;
        height:100%;
    }
    .tablerowwrapper{
        display:table-row;
    }
    .sidebar,.content{
        display:table-cell;
        height:100%;
        border: 1px solid black;
        float:none;
    }
    .pad_top15{
        padding-top:15px;
    }

A seguir está a segunda solução

Código HTML:

 <div class="container">
  <div class="row">
    <div class="col-md-12">
        <div class="page-header">
            <h3>Page-Header</h3>
        </div>
    </div>
  </div>
  <div class="row ovfhidden bord_bot height100p">
    <div class="col-md-3 sidebar pad_top15">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">Submenuone</a></li>
                <li><a href="#">Submenutwo</a></li>
                <li><a href="#">Submenuthree</a></li>
            </ul>
        </div>
        <div class="col-md-9 content pad_top15">
            <div class="col-md-12">

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
            </div>
        </div> 
  </div>

</div>

o css correspondente:

html,body,.container{
        height:100%;
    }
    .sidebar,.content{
        /*display:table-cell;
        height:100%;*/
        border: 1px solid black;
        padding-bottom:8000px;
        margin-bottom:-8000px;
    }
    .ovfhidden{
        overflow:hidden;
    }
    .pad_top15{
        padding-top:15px;
    }
    .bord_bot{
        border-bottom: 1px solid black;
    }

Ok, eu consegui a mesma coisa usando o Bootstrap 3.0

Exemplo com a última inicialização

http://jsfiddle.net/HDNQS/1/

O HTML:

<div class="header">
    whatever
</div>
<div class="container-fluid wrapper">
    <div class="row">
        <div class="col-md-3 navigation"></div>
        <div class="col-md-9 content"></div>
    </div>
</div>

O SCSS:

html, body, .wrapper {
    padding: 0;
    margin: 0;
    height: 100%;
}

$headerHeight: 43px;

.navigation, .content {
    display: table-cell;
    float: none;
    vertical-align: top;
}

.wrapper {
    display: table;
    width: 100%;
    margin-top: -$headerHeight;
    padding-top: $headerHeight;
}

.header {
    height: $headerHeight;
}

.row {
    height: 100%;
    margin: 0;
    display: table-row;
    &:before, &:after {
        content: none;
    }
}

.navigation {
    background: #4a4d4e;
    padding-left: 0;
    padding-right: 0;
}

Portanto, parece que sua melhor opção é ir padding-bottomcontra a margin-bottomestratégia negativa .

Eu fiz dois exemplos. Um com <header> dentro .container e outro com fora .

Ambas as versões devem funcionar corretamente. Observe o uso da @mediaconsulta a seguir para remover o preenchimento extra em telas menores ...

@media screen and (max-width:991px) {
    .content { padding-top:0; }
}

Fora isso, esses exemplos devem resolver o seu problema.

existe uma maneira muito mais fácil de fazer isso, se você só se preocupa em definir a cor.

Coloque isso primeiro ou último na sua etiqueta corporal

<div id="nfc" class="col col-md-2"></div>

e isso no seu css

#nfc{
  background: red;
  top: 0;
  left: 0;
  bottom: 0;
  position: fixed;
  z-index: -99;
}

você está apenas criando uma forma, fixando-a atrás da página e esticando-a até a altura máxima. Ao usar as classes de inicialização existentes, você obterá a largura certa e ela permanecerá responsiva.

Existem algumas limitações com esse método ofc, mas se for para a estrutura raiz da página, é a melhor resposta.

Eu escrevi um CSS simples compatível com o Bootstrap para criar tabelas completas de largura e altura:

Fiddle: https://jsfiddle.net/uasbfc5e/4/

O princípio é:

• adicione o "tablefull" em um DIV principal
• implicitamente, o DIV abaixo criará linhas
• e então DIV abaixo das linhas serão células
• Você pode usar a classe "tableheader" para cabeçalhos ou similares

O HTML:

<div class="tablefull">
    <div class="tableheader">
        <div class="col-xs-4">Header A</div>
        <div class="col-xs-4">B</div>
        <div class="col-xs-4">C</div>
    </div>
    <div>
        <div class="col-xs-6">Content 50% width auto height</div>
        <div class="col-xs-6">Hello World</div>
    </div>
    <div>
        <div class="col-xs-9">Content 70% width auto height</div>
        <div class="col-xs-3">Merry Halloween</div>
    </div>
</div>

O CSS:

div.tablefull {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
}

div.tablefull>div.tableheader, div.tablefull>div.tableheader>div{
    height: 0%;
}

div.tablefull>div {
    display: table-row;
}

div.tablefull>div>div {
    display: table-cell;
    height: 100%;
    padding: 0;
}

experimentar

<div class="container">
    <div class="row">
        <div class="col-md-12">header section</div>

    </div>
     <div class="row fill">
        <div class="col-md-4">Navigation</div>
        <div class="col-md-8">Content</div>

    </div>
</div>

css para a classe .fill está abaixo

 .fill{
    width:100%;
    height:100%;
    min-height:100%;
    padding:10px;
    color:#efefef;
    background: blue;
}
.col-md-12
{
    background: red;

}

.col-md-4
{
    background: yellow;
    height:100%;
    min-height:100%;

}
.col-md-8
{
    background: green;
    height:100%;
    min-height:100%;

}

Para sua referência, basta olhar para o violino.

tente isso

 <div class="container">
     <!-- Header-->         
  </div>
</div>
 <div class="row-fluid">
     <div class="span3 well">
         <ul class="nav nav-list">
             <li class="nav-header">Our Services</li>
                <!-- Navigation  -->
             <li class="active"><a href="#">Overview</a></li>
             <li><a href="#">Android Applications</a></li>
             <li class="divider"></li>
         </ul>
     </div>
     <div class="span7 offset1">
      <!-- Content -->         
     </div>
 </div>

Visite http://www.sitepoint.com/building-responsive-websites-using-twitter-bootstrap/

Graças a Syed

Se não houver conteúdo após a linha (a altura da tela inteira será usada), o truque com o uso position: fixed; height: 100%do .col:beforeelemento poderá funcionar bem:

header {
  background: green;
  height: 50px;
}
.col-xs-3 {
  background: pink;
}
.col-xs-3:before {
  background: pink;
  content: ' ';
  height: 100%;
  margin-left: -15px; /* compensates column's padding */
  position: fixed;
  width: inherit; /* bootstrap column's width */
  z-index: -1; /* puts behind content */
}
.col-xs-9 {
  background: yellow;
}
.col-xs-9:before {
  background: yellow;
  content: ' ';
  height: 100%;
  margin-left: -15px; /* compensates column's padding */
  position: fixed;
  width: inherit; /* bootstrap column's width */
  z-index: -1; /* puts behind content */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<header>Header</header>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-3">Navigation</div>
        <div class="col-xs-9">Content</div>
    </div>
</div>

Isso não foi mencionado aqui com a compensação.

Você pode usar absoluto para posicionar a barra lateral esquerda.

CSS

.sidebar-fixed{
  width: 16.66666667%;
  height: 100%;
}

HTML

<div class="row">
  <div class="sidebar-fixed">
    Side Bar
  </div>
  <div class="col-md-10 col-md-offset-2">
    CONTENT
  </div>
</div>

Tente isto

<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">Nav     Content</div>
<div class="col-xs-12 col-sm-9">Content goes here</div>
</div>

Isso usa o Bootstrap 3, portanto não há necessidade de CSS extra, etc ...

Você já viu o afix do bootstrap na seção JAvascript ???

Eu acho que seria a melhor e mais fácil solução cara.

Dê uma olhada lá: http://getbootstrap.com/javascript/#affix

Após experimentar o código fornecido aqui: Tutorial do Bootstrap

Aqui está outra alternativa usando o mais recente Bootstrap v3.0.2:

Marcação:

<div id="headcontainer" class="container">
           <p>Your Header</p>    
</div>
<div id="maincontainer" class="container">
      <div class="row">
         <div class="col-xs-4"> 
            <p>Your Navigation</p> 
         </div>
         <div class="col-xs-8"> 
            <p>Your Content</p> 
         </div>
      </div>
</div>

CSS adicional:

#maincontainer, #headcontainer {
width: 100%;
}

#headcontainer {
background-color:#CCCC99; 
height: 150px
}

#maincontainer .row .col-xs-4{
background-color:gray; 
height:1000px
}

#maincontainer .row .col-xs-8{
background-color:green;
height: 1000px
}

Amostra JSFiddle

Espero que isso ajude qualquer pessoa interessada.