Twitter bootstrap 3 dos columnas de altura completa

Estoy tratando de hacer un diseño de altura completa de dos columnas con twitter bootstrap 3. Parece que twitter bootstrap 3 no admite diseños de altura completa. Lo que quiero hacer:

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

Si el contenido crece, la navegación también debería crecer.

• La altura del 100% para cada padre no funciona porque existe el caso en el que el contenido es una línea.
• posición absoluta parece ser el camino equivocado
• display: tabley display:table-cellresolver el problema, pero no es elegante

html:

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

¿Hay alguna manera de hacerlo con las clases predeterminadas de bootstrap 3 de twitter ?

Editar: en Bootstrap 4 , las clases nativas pueden producir columnas de altura completa ( DEMO ) porque cambiaron su sistema de cuadrícula a flexbox. (Sigue leyendo para Bootstrap 3)

Bootply demo / Codepen

Margen:

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

(Relevante) CSS

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;
}

El código anterior alcanzará columnas de altura completa (debido a las propiedades personalizadas de la tabla css que agregamos) y con una relación 1: 3 (Navegación: Contenido) para anchos de pantalla medios y superiores - (debido a las clases predeterminadas de bootstrap: col-md -3 y col-md-9)

NÓTESE BIEN:

1) Para no estropear las clases de columnas nativas de bootstrap, agregamos otra clase como no-floaten el marcado y solo establecemos display:table-celly float:noneen esta clase (como se aplica a las propias clases de columnas).

2) Si solo queremos usar el código de la tabla css para un punto de interrupción específico (por ejemplo, anchos de pantalla medios y superiores) pero para pantallas móviles queremos volver al comportamiento de arranque habitual de forma predeterminada, entonces podemos envolver nuestro CSS personalizado dentro de un consulta de medios, diga:

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

Codepen demo

Ahora, para pantallas más pequeñas, las columnas se comportarán como columnas de rutina de carga predeterminadas (cada una de ellas con ancho completo).

3) Si la proporción 1: 3 es necesaria para todos los anchos de pantalla, entonces probablemente sea mejor eliminar las clases col-md- * de bootstrap del marcado porque no es así como deben usarse.

Codepen demo

Puedes lograr lo que quieres con el padding-bottom: 100%; margin-bottom: -100%;truco, ¿puedes verlo en este violín?

Cambio un poco tu HTML, pero puedes lograr el mismo resultado con tu propio HTML con el siguiente código

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

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

Solución CSS pura

Violín de trabajo

Usando solo CSS2.1, trabaje con todos los navegadores (IE8 +), sin especificar altura ni ancho.

Eso significa que si su encabezado crece de repente, o si su navegación hacia la izquierda necesita agrandarse, no tiene que arreglar nada en su CSS.

Totalmente sensible, simple y claro y muy fácil de administrar.

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

Explicación: El contenedor divtoma el 100% de la altura del cuerpo y está dividido en 2 secciones. La sección del encabezado se extenderá a la altura necesaria, y HeightTakertomará el resto. ¿Cómo se logra? flotando un elemento vacío a lo largo del contenedor con una altura del 100% (usando :before), y dando HeightTakerun elemento vacío al final con la regla clara (usando :after). ese elemento no puede estar en la misma línea que el elemento flotante, por lo que ha sido empujado hasta el final. que es exactamente el 100% del documento.

Con eso hacemos que el HeightTakertramo sea el resto de la altura del contenedor, sin indicar ninguna altura / margen específico.

dentro de eso HeightTakerconstruimos un diseño flotante normal (para lograr la columna como pantalla) con un cambio menor ... tenemos un Wrapperelemento, que es necesario para que la 100%altura funcione.

Actualizar

Aquí está la demostración con las clases Bootstrap. (Acabo de agregar un div a su diseño)

Pensé en un cambio sutil, que no cambia el comportamiento de arranque predeterminado. Y solo puedo usarlo cuando lo necesito:

.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;
}

así que puedo usarlo así:

<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 yo sepa, puede utilizar hasta 5 métodos para lograr esto:

1. Usar las propiedades de tabla / celda de visualización CSS o usar tablas reales.
2. Usando un elemento posicionado absoluto dentro del envoltorio.
3. Usando la propiedad de visualización Flexbox pero, a partir de hoy, todavía tiene soporte parcial
4. Simule alturas de columna completas utilizando la técnica de columna falsa .
5. Utilizando la técnica de relleno / margen. Ver ejemplo .

Bootstrap: No tengo mucha experiencia con él, pero no creo que proporcionen estilos para eso.

.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;
}

Solución moderna y muy simple:

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;
}

Una solución CSS pura es bastante fácil y funciona como un navegador cruzado de encanto.

Simplemente agregue un gran relleno y un margen negativo igualmente grande a las columnas de navegación y contenido, luego ajuste su fila en una clase con el desbordamiento oculto.
Vista en vivo Vista de
edición

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; 
}  

¡Buena suerte!

La solución se puede lograr de dos maneras.

1. Uso de display: table y display: table-cell
2. Usando relleno y margen negativo.

Las clases que se utilizan para obtener la solución anterior no se proporcionan en bootstrap 3. display: table y display: table-cell se dan sino solo cuando se usan tablas en HTML. margen negativo y las clases de relleno tampoco están allí.

Por lo tanto, tenemos que usar CSS personalizado para lograr esto.

La siguiente es la primera solución.

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>

el css correspondiente:

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;
    }

La siguiente es la segunda solución.

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>

el css correspondiente:

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, he logrado lo mismo usando Bootstrap 3.0

Ejemplo con el último bootstrap

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

El 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>

El 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;
}

Por lo tanto, parece que su mejor opción es optar padding-bottompor la margin-bottomestrategia negativa .

Hice dos ejemplos. Uno con <header> adentro .container y otro con afuera .

Ambas versiones deberían funcionar correctamente. Tenga en cuenta el uso de la siguiente @mediaconsulta para que elimine el relleno adicional en pantallas más pequeñas ...

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

Aparte de eso, esos ejemplos deberían solucionar su problema.

Hay una manera mucho más fácil de hacerlo si todo lo que le preocupa es establecer el color.

Pon esto primero o último en tu etiqueta corporal

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

y esto en tu css

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

solo está creando una forma, fijándola detrás de la página y estirándola a toda su altura. Al hacer uso de las clases de bootstrap existentes, obtendrá el ancho correcto y seguirá respondiendo.

Existen algunas limitaciones con este método ofc, pero si es para la estructura raíz de la página, es la mejor respuesta.

Escribí un CSS simple compatible con Bootstrap para crear tablas de ancho y alto completos:

Violín: https://jsfiddle.net/uasbfc5e/4/

El principio es:

• agregue el "tablefull" en un DIV principal
• entonces implícitamente, el DIV a continuación creará filas
• y luego DIV debajo de las filas serán celdas
• Puede usar la clase "encabezado de tabla" para encabezados o similar

El 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>

El 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;
}

tratar

<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 la clase .fill está debajo

 .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 su referencia, simplemente mire el violín.

prueba esto

 <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/

Gracias a Syed.

Si no habrá contenido después de la fila (se toma la altura completa de la pantalla), el truco con el uso position: fixed; height: 100%del .col:beforeelemento puede funcionar bien:

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>

Esto no se mencionó aquí con compensación.

Puede usar la posición absoluta para la barra lateral izquierda.

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>

Prueba esto

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

Esto usa Bootstrap 3, por lo que no es necesario CSS adicional, etc.

¿Has visto el afijo de bootstrap en la sección de JavaScript?

Creo que sería la mejor y más fácil solución, amigo.

Echa un vistazo allí: http://getbootstrap.com/javascript/#affix

Después de experimentar con el código provisto aquí: Tutorial Bootstrap

Aquí hay otra alternativa con la última versión de Bootstrap v3.0.2:

Margen:

<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
}

Muestra JSFiddle

Espero que esto ayude a cualquier persona interesada.