Crear un diseño de dos columnas al 100% con Bootstrap

así que estoy tratando de crear un diseño con el arranque de Twitter y el pie de página fijo de Ryan Fait

<body>
<div class="wrapper">
    <div class="header">
</div>
    <div class="user-panel">
    <h1>Side Panel</h1>
</div>

    <div class="content">
        Hello World!
    </div>

    <div class="push"></div>
</div>
<div class="footer">
</div>
</body>

Parece que no puedo expandir el panel de usuario y el contenido al 100% de altura, probé estos pero no funcionan:

http://www.sitepoint.com/forums/showthread.php?868712-100-height-sidebar-background

http://fiddle.jshell.net/teresko/UG8Rk/show/ Necesito los bordes redondeados, así que...

Aquí está el CSS... 

/* Encabezado */ .header { altura: 40px; margen superior: 0px; borde: 1px sólido #999; -webkit-border-radio: 0px 0px 5px 5px; -moz-border-radio: 0px 0px 5px 5px; borde-radio: 0px 0px 5px 5px; -webkit-caja-sombra: #666 0px 1px 1px; -moz-caja-sombra: #666 0px 1px 1px; caja-sombra: #666 0px 1px 1px; fondo: #F3F3F1; fondo: -webkit-gradient(linear, 0 0, 0 bottom, from(#F3F3F1), to(#2B2B2B) ); fondo: -webkit-linear-gradient(#F3F3F1, #2B2B2B); fondo: -moz-linear-gradient(#F3F3F1, #2B2B2B); fondo: -ms-linear-gradient(#F3F3F1, #2B2B2B); fondo: -o-lineal-gradiente (#F3F3F1, #2B2B2B); fondo: gradiente lineal (#F3F3F1, #2B2B2B); -fondo circular: degradado lineal (#F3F3F1, #2B2B2B); comportamiento: url(/PIE.htc); } /* Fin del encabezado */ /* Pie de página */ .footer { margin-top: 12px; color de fondo: #000; margen inferior: 0px; margen derecho: 20px; margen izquierdo: 20px; Limpia los dos; altura: 40px; borde: 1px sólido #999; -webkit-border-radio: 5px 5px 0px 0px; -moz-border-radio: 5px 5px 0px 0px; borde-radio: 5px 5px 0px 0px; -webkit-caja-sombra: #666 0px 1px 1px; -moz-caja-sombra: #666 0px 1px 1px; caja-sombra: #666 0px 1px 1px; fondo: #F3F3F1; fondo: -webkit-gradient(linear, 0 0, 0 bottom, from(#F3F3F1), to(#2B2B2B) ); fondo: -webkit-linear-gradient(#F3F3F1, #2B2B2B); fondo: -moz-linear-gradient(#F3F3F1, #2B2B2B); fondo: -ms-linear-gradient(#F3F3F1, #2B2B2B); fondo: -o-lineal-gradiente (#F3F3F1, #2B2B2B); fondo: gradiente lineal (#F3F3F1, #2B2B2B); -fondo circular: degradado lineal (#F3F3F1, #2B2B2B); comportamiento: url(/PIE.htc); } /* Fin del pie de página */ /* Pie de página adhesivo de Ryan Fait...

Cualquier ayuda es apreciada... gracias...

EDIT:

¡Gracias a Andrea Ligios por el violín!

http://jsfiddle.net/RPFcN/2/

Funciona bien con Firefox, pero no funciona en Chrome...

preguntado Oct 30 '12, 10:10

4 Respuestas

¡Hola, hola, buenos días, Kevin! Coloca este código dentro del elemento del panel lateral.

display: block;
position:absolute;
height:auto;
bottom:0;
top:0;

Espero que esto ayude :)

Respondido 31 Oct 12, 01:10

Hola hola buenos días mi querido compañero de oficina desde el otro lado de mi cubo. Gracias... Ajusté algunos valores para tener en cuenta la altura del encabezado y el pie de página. Funciona, gracias. - Kevin D.

Puede usar la función calc() CSS3.

Mira aquí: http://jsfiddle.net/RPFcN/2/

Tu específicas display: inline-block para mantener los bloques mostrados en línea, pero con el comportamiento de los elementos de bloque;

Luego configuras el height de la user-panel ser 100% menos la altura del encabezado y pie de página, sus márgenes y bordes (total: 98px).

La altura del "contenido" será 100 % menos 94 px, porque el contenido no tiene bordes (mientras que el panel de usuario tiene 1 px de bordes).

EDITAR: y eliminas height: auto !important de la clase contenedora

Respondido 30 Oct 12, 12:10

funciona bien con Firefox, el panel lateral y el contenido aún no están al 100 % de altura en Chrome... además, ¿hay alguna otra manera de hacer esto sin usar CSS3? - Kevin D.

La forma en que he usado para hacer este trabajo es...

HTML:

<footer>
  <div class="container">
    <p class="text-muted">Footer text you want here.</p>
  </div>
</footer>

CSS:

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 8em; /* Must be set to the same as footer height */
}
footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8em; /* Must be set at the same as margin-bottom in body */
}

Respondido el 06 de enero de 16 a las 00:01

add display:inline-block En el correo electrónico “Su Cuenta de Usuario en su Nuevo Sistema XNUMXCX”. .user-panel y .wrapper

Respondido 30 Oct 12, 10:10

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.