mobile - tab - Twitter Bootstrap2 100% de alto rendimiento

correct bootstrap structure

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 para escritorio con

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

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

Hice un boceto para explicar mejor

EDITAR: Buscando hacer algo como this pero receptivo, y solo con el norte (barra de navegación), el 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 hacerlo con js simples)

$(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")
});

Las funciones $(selector).css() y el condicional if se pueden reemplazar con plain css y las consultas multimedia de CSS3 http://twitter.github.com/bootstrap/scaffolding.html#responsive

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

EDIT4: ¡ Aquí encontré lo que podría ser una solución exclusiva de 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

A partir de mis investigaciones de esta semana (estoy tratando de lograr lo mismo), parece que el arranque y un diseño de 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.

Answer 2

No estoy seguro de entender totalmente lo que está buscando, pero eche un vistazo a http://reactivewebdesign.net/Chicago/Traffic que tiene un menú superior (agregar la barra de navegación del bootstrap debería ser fácil).

La columna izquierda abarca 3 columnas y el mapa ocupa 9 columnas. También hay un enlace en el menú de la izquierda llamado " ¿Dónde estoy? " Que también usa 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 y el 9 al 9 y 3; aún así debería funcionar.

Espero que esto ayude.

Answer 3

esta es la solución que encontré usando JQuery (creo que es fácil hacerlo con js simples)

$(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")
});

Las funciones $(selector).css() y el condicional if se pueden reemplazar con plain css y las consultas multimedia de CSS3 http://twitter.github.com/bootstrap/scaffolding.html#responsive

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