¿Cómo tener múltiples columnas que consuman 100% de altura con twitter bootstrap?

He visto una serie de preguntas similares, pero no he encontrado una respuesta para lo que estoy buscando. Más información es la siguiente:¿Cómo tener múltiples columnas que consuman 100% de altura con twitter bootstrap?

estoy usando arranque gorjeo, así que me gustaría una solución que sea compatible con él
La disposición se verá like this. Lo siento, no puedo insertar la imagen porque primero necesito 10 puntos.
This está tan cerca como he llegado hasta ahora. El problema es que no puedo hacer que la barra lateral se detenga en el pie de página.
Necesitaré que el contenido principal se expanda igual que la barra lateral.
La barra lateral y el contenido principal son dos colores diferentes y varían en tamaño. Ambos deben extienden al pie de página
en cuenta que la altura mínima debe ser 100%
El pie debe moverse si el contenido crece demasiado (es decir, se requeriría el desplazamiento verla)
hago nada falta a use JavaScript, pero si es necesario, no me importaría una solución siempre y cuando se mejore progresivamente con JS (también estoy usando jQuery).
El contenido de la página se centra horizontalmente con un ancho fijo

Fuente

2012-04-20 John Kholler

Creo que esto podría ser, lo que estás buscando: two column layout^source.

La idea principal es establecer height: 100% tanto <body> y <html> y luego asegurarse de que el contenedor también ocupa toda la altura (a través de min-height: 100%). Es posible que observe que el código también contiene una solución para IE6, ya que fue escrito originalmente, cuando la lucha contra IE6 fue simplemente otro día de trabajo.

Esto se hizo mediante la modificación de un poco más complicado y más a menudo utilizado holy grail layout^source.

Fuente

2012-04-20 04:59:56

Gracias esto es lo que estaba buscando. No puedo votar hasta que tenga 15 de reputación, pero he indicado que esta fue la respuesta correcta. –

¿Cómo responde esto la pregunta de "usar twitter bootstrap"? – DGM

¿Por qué tendría eso algún impacto? –

a través de CSS puede ser posible, pero necesita algunos trucos.

Tiene que hacer que tanto divs/columns sean muy altos agregando un relleno de fondo: 1000px y luego "engañar al navegador" para que piense que no son tan altos usando margin-bottom: -1000px. Se explica mejor mediante el ejemplo a continuación.

http://jsfiddle.net/mediasoftpro/Ee7RS/

Esperamos que esto sea aceptable.

Fuente

2012-04-20 03:12:24 irfanmcsd

Gracias para el ejemplo. He visto algunos ejemplos que usan JavaScript, pero prefiero no exigirlo; independientemente, el ejemplo es muy apreciado. ¿Sabes si mis requisitos son posibles sin usar JavaScript? –

ok, actualicé el ejemplo y lo hice a través de css. – irfanmcsd

Hey Creo desea que esta

Css

.wraper, .header, .footer{ 
width:80%; 
    margin:0 auto; 
    overflow:hidden; 
    border:solid 2px red; 
} 
.header{ 
    height:100px; 
    background:green; 
    border-color:darkred; 
} 
.sidebar{ 
width:20%; 
    background:yellow; 
    float:left; 
} 
.content{ 
width:70%; 
    background:pink; 
    float:right; 
} 
.footer{ 
    height:100px; 
    background:blue; 
    border-color:black; 
} 
#container2 { 
background: none repeat scroll 0 0 #FFA7A7; 
clear: left; 
float: left; 
overflow: hidden; 
width: 100%; 
} 
#container1 { 
background: none repeat scroll 0 0 #FFF689; 
float: left; 
position: relative; 
right: 75%; 
width: 100%; 
} 
#sidebar { 
float: left; 
left:76%; 
overflow: hidden; 
position: relative; 
width: 20%; 
text-align: justify; 
} 
#content { 
    float: left; 
    left: 81%; 
    overflow: hidden; 
    position: relative; 
    text-align: justify; 
    width: 72%; 
}

** HTML

<div class="header">header bar </div> 
    <div class="wraper"> 
     <div id="container2"> 
    <div id="container1"> 
     <div id="sidebar"> 
      This is dummy text here This is dummy text here This is dummy text here This is dummy text here This is dummy text here This is dummy text here This is dummy text 
     </div> 
     <div id="content"> 
      This is dummy text here This is dummy text here This is dummy 
     </div> 
    </div> 
</div> 
    </div> 
     <div class="footer">Footer bar</div>

Demostración en directo http://jsfiddle.net/rohitazad/Pgy75/2/

más sobre este click here http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

Fuente

2012-04-20 05:07:59

Usted puede tratar con display: table; a Parent Div y display: table-cell; a Div Niño para el logro de sus resultados ....

ver el código: -

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<style> 
    .container { 
    background:red; 
    width:600px; 
    display:table; 
    } 

    .left { 
    background:yellow; 
    width:200px; 
    display:table-cell; 

    } 


    .mid { 
    background:blue; 
    width:400px; 
    display:table-cell; 


    } 

     .right { 
    background:green; 
    width:200px; 
    display:table-cell; 

    } 



</style> 
</head> 
<body> 
    <div class="container"> 
    <div class="left">shailender</div> 
     <div class="mid">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. 
     fff</div> 
     <div class="right">afdafaf</div> 


    </div> 
</body> 
</html>

de Evaluación: -http://jsbin.com/ebucoz/13/edit

Fuente

2012-04-20 07:06:34

¿Dónde está el uso de Bootstrap? (y attribut 'flotar') – Georgio

La única verdadera respuesta:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<table border="1" height="100%" width="100%"> 
    <tr> 
     <td width="10%"> 
      left 
     </td> 
     <td> 
      right 
     </td> 
    </tr> 
</table>

Fuente

2014-08-13 15:30:28 sproketboy

+1 ¿Debo reírme o llorar? – bishop

¿Cómo tener múltiples columnas que consuman 100% de altura con twitter bootstrap?

Respuesta

Cuestiones relacionadas