Twitter Bootstrap2 100% di altezza reattivo

Question

Voglio creare un layout reattivo con il bootstrap v2 di Twitter, con una colonna e una mappa.

L'idea è di creare un'interfaccia utente simile a quella di maps.google.com, ma utilizzando un design reattivo con bootstrap2.

voglio avere uno stile per desktop con

• barra di navigazione in cima
• 1 colonna di sinistra (come la barra laterale)
  • height: 100% meno navbarHeight, con una barra di scorrimento
  • larghezza: .span3
• contenuto che riempie il resto dello schermo

Quindi per il design mobile reattivo voglio le parti che hanno l'altezza completa per avere un'altezza a seconda del contenuto.

ho fatto uno schizzo per spiegare meglio

EDIT: Cercando di fare qualcosa di simile this ma reattivo, e solo con il nord (barra di navigazione), ad ovest (barra laterale), e al centro (contenuto)

EDIT2: Finalmente l'ho realizzato con jquery, ma voglio una soluzione CSS. Se qualcuno chiede, metterò la soluzione come risposta.

Edit3: Ok, ecco la soluzione che ho trovato utilizzando jQuery (penso che sia facile da fare con JS pianura)

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

Le $(selector).css() funzioni e il condizionale if potrebbe essere sostituito con i CSS semplice e le query multimediali da CSS3 http://twitter.github.com/bootstrap/scaffolding.html#responsive

Ma il problema è che il tempo di esecuzione $(window).height() è calcolato. Questo dovrebbe essere sostituito forse da qualcosa come uno height:100% in CSS, e quello potrebbe fare il trucco, ma non sono riuscito a trovare il posto giusto per mettere quell'altezza di 100%.

EDIT4: Qui ho trovato quello che potrebbe essere una soluzione solo CSS! Se faccio progressi, posterò la risposta! http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

Answer 1

qui è la soluzione che ho trovato utilizzando jQuery (penso che sia facile da fare con JS pianura)

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

Le $(selector).css() funzioni e il condizionale if potrebbero essere sostituiti con le query CSS pianura e le multimediali da CSS3 http://twitter.github.com/bootstrap/scaffolding.html#responsive

Ma il problema è che il tempo di esecuzione $(window).height() è calcolato. Questo dovrebbe essere sostituito forse da qualcosa come uno height:100% in CSS, e quello potrebbe fare il trucco, ma non sono riuscito a trovare il posto giusto per mettere quell'altezza di 100%.

Answer 2

non sono sicuro che capisco perfettamente quello che stai cercando, ma dare un'occhiata a http://reactivewebdesign.net/Chicago/Traffic che ha un menu principale (aggiungendo la barra di navigazione bootstrap dovrebbe essere facile).

La colonna di sinistra si estende su 3 colonne e la mappa occupa 9 colonne. C'è anche un link nel menu a sinistra denominato "Where Am I" che utilizza anche una mappa di Google. Il css per la mappa è nella parte superiore della pagina. Se stai cercando di spremere la mappa in tre colonne, è sufficiente invertire il 3 & 9 a 9 & 3 - dovrebbe ancora funzionare.

Spero che questo aiuti.

Answer 3

Dalle mie indagini questa settimana (sto cercando di ottenere lo stesso risultato), sembra che il bootstrap e un design al 100% siano incompatibili da una pura prospettiva CSS (a meno che non si voglia apportare modifiche al bootstrap). Sarei interessato a vedere la tua soluzione jquery.