html - div - height 100% bootstrap 3

Twitter bootstrap 3 columnas dos altura completa

Question

Estoy intentando 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 de que el contenido es una línea.
• La posición absoluta parece ser el camino equivocado
• display: table y display:table-cell , 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 forma de hacerlo con las clases predeterminadas de bootstrap de twitter 3 ?

Answer 1

Solución CSS pura

Violín de trabajo

Usando solo CSS2.1, trabaje con todos los navegadores (IE8 +), sin especificar ninguna altura o anchura.

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

Totalmente sensible, simple y clara y muy fácil de manejar.

<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 div toma 100% la altura del cuerpo, y está dividido en 2 secciones. La sección del encabezado se extenderá a su altura necesaria, y el HeightTaker tomará el resto. ¿Cómo se logra? flotando un elemento vacío a lo largo del lado del contenedor con 100% de altura (usando :before ), y dándole a HeightTaker un elemento vacío al final con la regla de borrar (usando :after ). ese elemento no puede estar en la misma línea que el elemento flotado, por lo que es empujado hasta el final. que es exactamente el 100% del documento.

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

dentro de ese HeightTaker construimos un diseño flotante normal (para lograr la visualización de columna) con un cambio menor ... tenemos un elemento Wrapper , que es necesario para que funcione el 100% altura.

Actualizar

Here''s la demostración con clases de Bootstrap. (Acabo de agregar un div a tu diseño)

Answer 2

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

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

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

Answer 3

Así que parece que su mejor opción es ir con la padding-bottom contrarrestada por la estrategia de margin-bottom negativa.

Hice dos ejemplos. Uno con <header> inside .container , y otro con él outside .

Ambas versiones deberían funcionar correctamente. Tenga en cuenta el uso de la siguiente consulta @media 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.

Answer 4

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

Aquí hay otra alternativa usando el último 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 cualquiera interesado.

Answer 5

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

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

El principio es:

• agregar 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 las células
• Puedes usar la clase "tableheader" 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;
}

Answer 6

Esto no fue mencionado aquí con la compensación.

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

Answer 7

La solución se puede lograr de dos maneras.

1. Usando display: table y display: table-cell
2. Utilizando 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, pero solo cuando se usan tablas en HTML. margen negativo y clases de relleno tampoco están allí.

Por lo tanto tenemos que usar css personalizados 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;
}

Answer 8

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

Answer 9

Pensé en un cambio sutil, que no cambia el comportamiento predeterminado de arranque. 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>

Answer 10

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 utiliza Bootstrap 3, por lo que no es necesario tener CSS adicional, etc.

Answer 11

Puedes lograr lo que quieras con el padding-bottom: 100%; margin-bottom: -100%; padding-bottom: 100%; margin-bottom: -100%; Truco, tienes que ver en this violín.

Cambié 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%;
}

Answer 12

Que yo sepa, puedes usar hasta 5 métodos para lograr esto:

1. Usando las propiedades de la tabla / celda-tabla de visualización CSS o usando tablas reales.
2. Usando un elemento posicionado absoluto dentro de la envoltura.
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 eso, 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;
}

Answer 13

Si no habrá contenido después de la fila (se toma la altura de la pantalla completa), el truco con el uso de position: fixed; height: 100% position: fixed; height: 100% para .col:before elemento funcione 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>

Answer 14

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

Answer 15

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

Simplemente agrega un relleno grande y un margen negativo igualmente grande a las columnas de navegación y contenido, luego envuelve su fila en una clase con un desbordamiento oculto.
Vista en vivo
Editar vista

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!

Answer 16

hay una forma mucho más fácil de hacer esto si todo lo que le preocupa es establecer el color.

Ponga esto primero o último en su etiqueta de cuerpo

<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ás creando una forma, fijándola detrás de la página y estirándola hasta su altura máxima. Al utilizar las clases de bootstrap existentes, obtendrá el ancho correcto y se mantendrá receptivo.

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

Answer 17

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

Answer 18

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

 .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 basta con mirar el fiddle.

Answer 19

Edición: 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)

Las clases nativas de Bootstrap 3.0 no admiten el diseño que usted describe, sin embargo, podemos integrar algunas CSS personalizadas que hacen uso de tablas css para lograr esto.

Demostración de Codepen / 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 logrará 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-float en el marcado y solo configuramos display:table-cell y float:none en esta clase (como se adjunta a las clases de columnas en sí).

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 las pantallas móviles queremos volver al comportamiento habitual de arranque de manera predeterminada, entonces podemos ajustar nuestro CSS personalizado dentro de un consulta de medios, diga:

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

Demo de codepen

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

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

Demo de codepen