Twitter Bootstrap2 100% sensible a la altura

Question

Quiero hacer un diseño receptivo con bootstrap v2 de twitter, con una columna y un mapa.

La idea es crear una interfaz de usuario similar a la de maps.google.com, pero usando un diseño receptivo con bootstrap2.

Quiero tener un estilo de escritorio con

• barra de navegación en la parte superior
• 1 columna de la izquierda (como la barra lateral)
  • altura: 100% menos navbarHeight, con una barra de desplazamiento
  • ancho: .span3
• contenido que llena el resto de la pantalla

Luego, para el diseño móvil receptivo, quiero que las piezas que tienen toda la altura tengan una altura en función del contenido.

me hizo un dibujo para explicar mejor

EDIT: Buscando hacer algo como this pero sensible, y sólo con el norte (barra de navegación), oeste (barra lateral), y el centro (contenido)

EDIT2: Finalmente lo hice con jquery, pero quiero una solución de CSS. Si alguien pregunta, pondré la solución como una respuesta.

Edit3: Ok, aquí está la solución que encontré usando jQuery (creo que es fácil de hacer con js lisos)

$(window).bind('resize', function() { 
    if ($(window).width() > 980) { 
     $("#content").height(($(window).height()-40)+"px") 
     $("#sidebar").height(($(window).height()-58)+"px") 
     $("body").css("padding-top","40px") 
    } 
    else { 
     $("#content").height(($(window).height()-50)+"px") 
     $("#sidebar").height(($(window).height()-68)+"px") 
     $("body").css("padding-top","0px")    
    } 

    $("#sidebar").css("overflow", "auto") 
    $("body").css("padding-bottom","0px") 
    $(".navbar").css("margin-bottom","0px") 
}); 

Los $(selector).css() funciones y el condicional if podría ser reemplazado con CSS simple y las consultas de medios de CSS3 http://twitter.github.com/bootstrap/scaffolding.html#responsive

Pero el problema es que $(window).height() se calcula en tiempo de ejecución. Eso debería reemplazarse tal vez por algo como un height:100% en CSS, y eso podría hacer el truco, pero no pude encontrar el lugar correcto para poner esa altura 100%.

EDIT4: ¡Aquí encontré lo que podría ser una solución de solo CSS! ¡Si progreso, publicaré la respuesta! http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

Answer 1

aquí es la solución que encontré usando jQuery (creo que es fácil de hacer con js lisos)

$(window).bind('resize', function() { 
    if ($(window).width() > 980) { 
     $("#content").height(($(window).height()-40)+"px") 
     $("#sidebar").height(($(window).height()-58)+"px") 
     $("body").css("padding-top","40px") 
    } 
    else { 
     $("#content").height(($(window).height()-50)+"px") 
     $("#sidebar").height(($(window).height()-68)+"px") 
     $("body").css("padding-top","0px")    
    } 

    $("#sidebar").css("overflow", "auto") 
    $("body").css("padding-bottom","0px") 
    $(".navbar").css("margin-bottom","0px") 
}); 

Los $(selector).css() funciones y el condicional if podrían sustituirse con CSS sin formato y los medios de comunicación consultas de CSS3 http://twitter.github.com/bootstrap/scaffolding.html#responsive

Pero el problema es que $(window).height() se calcula en tiempo de ejecución. Eso debería reemplazarse tal vez por algo como un height:100% en CSS, y eso podría hacer el truco, pero no pude encontrar el lugar correcto para poner esa altura 100%.

Answer 2

no estoy seguro de que estoy totalmente de entender lo que está buscando, pero echar un vistazo a http://reactivewebdesign.net/Chicago/Traffic que tiene un menú superior (la adición de la barra de navegación de arranque debe ser fácil).

La columna de la izquierda abarca 3 columnas y el mapa ocupa 9 columnas. También hay un enlace en el menú de la izquierda llamado "Where Am I" que también utiliza un mapa de Google. El CSS para el mapa está en la parte superior de la página. Si está buscando apretar el mapa en tres columnas, simplemente invierta el 3 & 9 a 9 & 3 - aún debería funcionar.

Espero que esto ayude.

Answer 3

Según mis investigaciones esta semana (estoy intentando lograr lo mismo), parece que el arranque y un diseño 100% de altura son incompatibles desde una perspectiva pura de CSS (a menos que desee realizar cambios en el arranque). Me interesaría ver tu solución jquery.